{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-pricing-design-demo",
  "title": "Custom Pricing Design Demo",
  "description": "Demo showing custom pricing component for a design service.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/custom-pricing"
  ],
  "files": [
    {
      "path": "registry/demo/ecommerce/custom-pricing-design/index.tsx",
      "content": "'use client';\nimport {\n  CustomPricingProvider,\n  CustomPricingCheckedControl,\n  CustomPricingQuantityControl,\n  CustomPricingTotalControl,\n} from '@/components/systaliko-ui/ecommerce/custom-pricing';\nimport { Label } from '@/components/systaliko-ui/shadcn/label';\nimport { Slider } from '@/components/systaliko-ui/shadcn/slider';\nimport { motion } from 'motion/react';\nimport { Switch } from '@/components/systaliko-ui/shadcn/switch';\nimport { SlidingNumber } from '@/components/systaliko-ui/text/sliding-number';\n\nfunction SelectItem({\n  id,\n  label,\n  price,\n  checked,\n  handleChange,\n  groupId,\n}: {\n  id: string;\n  label: string;\n  price: string;\n  checked: boolean;\n  handleChange: () => void;\n  groupId: string;\n}) {\n  return (\n    <div className=\"relative group rounded-full transition-colors duration-200 has-[:checked]:text-white grid grid-cols-1 grid-rows-1 *:col-start-1 *:row-start-1\">\n      <input\n        className=\"size-full [all:unset]\"\n        type=\"checkbox\"\n        name={id}\n        value={id}\n        id={id}\n        checked={checked}\n        onChange={handleChange}\n      />\n      <label\n        htmlFor={id}\n        className=\"relative p-2 z-2 text-nowrap pointer-events-none flex gap-px flex-wrap justify-center items-center text-xs font-medium\"\n      >\n        {label} <span className=\"text-[10px] tabular-nums\">{price}</span>\n      </label>\n      {checked && (\n        <motion.div\n          layoutId={groupId}\n          className=\"size-full rounded-full\"\n          style={{\n            background: 'var(--primary)',\n            backgroundImage: 'linear-gradient(180deg, #444 0%, #000 100%)',\n          }}\n          transition={{\n            type: 'spring',\n            stiffness: 260,\n            damping: 20,\n            mass: 1,\n          }}\n        />\n      )}\n    </div>\n  );\n}\nfunction Selects() {\n  return (\n    <div className=\"space-y-2\">\n      <h3 className=\"font-medium\">Website Type</h3>\n\n      <div\n        className=\"relative flex bg-input rounded-full ring ring-ring/40 p-0.5 w-fit border\"\n        id=\"custom-pricing-selects\"\n      >\n        <CustomPricingCheckedControl\n          id=\"landing page\"\n          defaultChecked={true}\n          price={1500}\n          group=\"website-type\"\n          render={({ id, checked, toggleChecked }) => (\n            <div className=\"relative \">\n              <SelectItem\n                price={'$1.500'}\n                id={id}\n                checked={checked}\n                handleChange={() => toggleChecked(id)}\n                label=\"Landing page\"\n                groupId=\"custom-pricing-selects\"\n              />\n            </div>\n          )}\n        />\n\n        <CustomPricingCheckedControl\n          id=\"business website\"\n          price={3000}\n          group=\"website-type\"\n          render={({ id, checked, toggleChecked }) => (\n            <div className=\"relative \">\n              <SelectItem\n                price={'$3.000'}\n                id={id}\n                checked={checked}\n                handleChange={() => toggleChecked(id)}\n                label=\"Business website\"\n                groupId=\"custom-pricing-selects\"\n              />\n            </div>\n          )}\n        />\n\n        <CustomPricingCheckedControl\n          id=\"ecommerce store\"\n          price={5000}\n          group=\"website-type\"\n          render={({ id, checked, toggleChecked }) => (\n            <div className=\"relative \">\n              <SelectItem\n                price={'$5.000'}\n                id={id}\n                checked={checked}\n                handleChange={() => toggleChecked(id)}\n                label=\"Ecommerce store\"\n                groupId=\"custom-pricing-selects\"\n              />\n            </div>\n          )}\n        />\n      </div>\n    </div>\n  );\n}\nfunction Quantities() {\n  return (\n    <div className=\"space-y-4\">\n      <CustomPricingQuantityControl\n        id=\"number of pages\"\n        unitPrice={100}\n        defaultValue={0}\n        render={({ id, subtotal, unitPrice, quantity, handleChange }) => (\n          <div className=\"space-y-1\">\n            <div className=\"flex items-center gap-2 justify-between\">\n              <Label className=\"text-sm font-medium\" htmlFor={id}>\n                Number of pages{' '}\n                <span className=\"text-[10px] text-muted-forground\">\n                  ${unitPrice}x{quantity}\n                </span>\n              </Label>\n\n              <SlidingNumber\n                value={subtotal}\n                className=\"text-xs font-medium text-muted-foreground tracking-tight\"\n              />\n            </div>\n            <Slider\n              id={id}\n              min={0}\n              max={10}\n              step={1}\n              value={[quantity]}\n              onValueChange={handleChange}\n            />\n          </div>\n        )}\n      />\n\n      <CustomPricingQuantityControl\n        id=\"project urgency\"\n        unitPrice={50}\n        defaultValue={0}\n        render={({ id, subtotal, unitPrice, quantity, handleChange }) => (\n          <div className=\"space-y-1\">\n            <div className=\"flex items-center gap-2 justify-between\">\n              <Label className=\"text-sm font-medium\" htmlFor={id}>\n                Project urgency\n                <span className=\"text-[10px] text-muted-forground\">\n                  ${unitPrice}x{quantity}\n                </span>\n              </Label>\n\n              <SlidingNumber\n                value={subtotal}\n                className=\"text-xs font-medium text-muted-foreground tracking-tight\"\n              />\n            </div>\n            <Slider\n              id={id}\n              min={0}\n              max={10}\n              step={1}\n              value={[quantity]}\n              onValueChange={handleChange}\n            />\n          </div>\n        )}\n      />\n\n      <CustomPricingQuantityControl\n        id=\"design customization\"\n        unitPrice={300}\n        defaultValue={0}\n        render={({ id, subtotal, unitPrice, quantity, handleChange }) => (\n          <div className=\"space-y-1\">\n            <div className=\"flex items-center gap-2 justify-between\">\n              <Label className=\"text-sm font-medium\" htmlFor={id}>\n                Custom Design Level\n                <span className=\"text-[10px] text-muted-forground\">\n                  ${unitPrice}x{quantity}\n                </span>\n              </Label>\n\n              <SlidingNumber\n                value={subtotal}\n                className=\"text-xs font-medium text-muted-foreground tracking-tight\"\n              />\n            </div>\n            <Slider\n              id={id}\n              min={0}\n              max={3}\n              step={1}\n              value={[quantity]}\n              onValueChange={handleChange}\n            />\n          </div>\n        )}\n      />\n    </div>\n  );\n}\n\nfunction Options() {\n  return (\n    <div className=\"space-y-3\">\n      <h3 className=\"font-medium text-sm\">Additional Features</h3>\n      <div className=\"grid gap-2\">\n        <CustomPricingCheckedControl\n          id=\"seo-optimization\"\n          price={200}\n          type=\"checkbox\"\n          render={({ id, checked, toggleChecked }) => (\n            <div className=\"flex items-center justify-between p-3 rounded-xl border bg-card/50 transition-colors hover:bg-card/80\">\n              <div className=\"space-y-0.5\">\n                <Label\n                  htmlFor={id}\n                  className=\"text-sm font-medium leading-none cursor-pointer\"\n                >\n                  SEO Optimization\n                </Label>\n                <p className=\"text-[10px] text-muted-foreground\">\n                  Boost your search engine rankings\n                </p>\n              </div>\n              <div className=\"flex items-center gap-3\">\n                <span className=\"text-xs font-medium tabular-nums\">$200</span>\n                <Switch\n                  checked={checked}\n                  onCheckedChange={() => toggleChecked(id)}\n                  id={id}\n                />\n              </div>\n            </div>\n          )}\n        />\n\n        <CustomPricingCheckedControl\n          id=\"copywriting\"\n          price={150}\n          type=\"checkbox\"\n          render={({ id, checked, toggleChecked }) => (\n            <div className=\"flex items-center justify-between p-3 rounded-xl border bg-card/50 transition-colors hover:bg-card/80\">\n              <div className=\"space-y-0.5\">\n                <Label\n                  htmlFor={id}\n                  className=\"text-sm font-medium leading-none cursor-pointer\"\n                >\n                  Copywriting\n                </Label>\n                <p className=\"text-[10px] text-muted-foreground\">\n                  Professional copywriting for your website\n                </p>\n              </div>\n              <div className=\"flex items-center gap-3\">\n                <span className=\"text-xs font-medium tabular-nums\">$150</span>\n                <Switch\n                  checked={checked}\n                  onCheckedChange={() => toggleChecked(id)}\n                  id={id}\n                />\n              </div>\n            </div>\n          )}\n        />\n\n        <CustomPricingCheckedControl\n          id=\"third party\"\n          price={150}\n          type=\"checkbox\"\n          render={({ id, checked, toggleChecked }) => (\n            <div className=\"flex items-center justify-between p-3 rounded-xl border bg-card/50 transition-colors hover:bg-card/80\">\n              <div className=\"space-y-0.5\">\n                <Label\n                  htmlFor={id}\n                  className=\"text-sm font-medium leading-none cursor-pointer\"\n                >\n                  Third party integration\n                </Label>\n                <p className=\"text-[10px] text-muted-foreground\">\n                  Connect with tools you already use\n                </p>\n              </div>\n              <div className=\"flex items-center gap-3\">\n                <span className=\"text-xs font-medium tabular-nums\">$150</span>\n                <Switch\n                  checked={checked}\n                  onCheckedChange={() => toggleChecked(id)}\n                  id={id}\n                />\n              </div>\n            </div>\n          )}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction TotalDisplay() {\n  return (\n    <div className=\"pt-6 border-t border-dashed border-muted-foreground/30 mt-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"space-y-0.5\">\n          <h4 className=\"font-semibold text-base\">Total Estimate</h4>\n          <p className=\"text-xs text-muted-foreground\">\n            Dynamic pricing based on your selection\n          </p>\n        </div>\n        <CustomPricingTotalControl\n          render={({ total }) => (\n            <div className=\"text-right\">\n              <SlidingNumber\n                value={total}\n                className=\"font-semibold tracking-tight text-primary\"\n              />\n              <p className=\"text-xs text-muted-foreground  tracking-widest mt-0.5\">\n                Estimated USD\n              </p>\n            </div>\n          )}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport function CustomPricingDesignDemo() {\n  return (\n    <div className=\"min-h-screen p-6 place-content-center\">\n      <div className=\"space-y-8 p-6 rounded border bg-card shadow-xs mx-auto max-w-md\">\n        <CustomPricingProvider>\n          <Selects />\n          <Quantities />\n          <Options />\n          <TotalDisplay />\n        </CustomPricingProvider>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/custom-pricing-design.tsx"
    }
  ],
  "type": "registry:block"
}