{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "trauikit",
  "homepage": "https://ui.trabilisim.tech//",
  "items": [
    {
      "name": "theme",
      "type": "registry:style",
      "title": "TRA UI Theme",
      "description": "Complete theme configuration for TRA UI Kit including colors and design tokens",
      "dependencies": ["@phosphor-icons/react"],
      "cssVars": {
        "theme": {
          "font-sans": "Inter, sans-serif",
          "shadow-input-hover": "0 0 20px 0 var(--primary-soft)",
          "shadow-input-focus": "0 0 20px 0 var(--input-focused)",
          "shadow-soft-grey": "0 0 20px 0 var(--neutral-soft-grey)",
          "shadow-soft-primary": "0 0 20px 0 var(--primary-soft)",
          "shadow-hard-grey": "0 0 20px 0 var(--neutral-hard-grey)",
          "shadow-hard-primary": "0 0 20px 0 var(--primary-hard)"
        },
        "light": {
          "primary": "221 87% 52%",
          "disabled": "221 40% 76%",
          "disabled-dark": "221 20% 79%",
          "disabled-light-dark": "221 54% 86%",
          "disabled-light": "221 48% 91%",
          "primary-30": "223 100% 91%",
          "primary-15": "221 100% 95%",
          "primary-5": "220 100% 98%",
          "background": "0 0% 100%",
          "primary-focused": "221 84% 43%",
          "primary-soft": "hsla(221, 87%, 52%, 0.1)",
          "primary-hard": "hsl(221, 87%, 52%, 0.15)",
          "secondary": "15 97% 60%",
          "secondary-light": "15 100% 96%",
          "tertiary": "54 97% 60%",
          "error": "0 100% 50%",
          "error-light": "0 100% 95%",
          "success": "147 100% 40%",
          "success-light": "146 72% 94%",
          "warning": "54 76% 52%",
          "warning-light": "54 100% 91%",
          "neutral-black": "0 0% 12%",
          "neutral-light-black": "0 0% 25%",
          "neutral-grey": "0 0% 60%",
          "neutral-grey-soft": "hsla(0, 0%, 60%, 0.08)",
          "neutral-grey-hard": "hsl(0, 0%, 60%, 0.15)",
          "neutral": "0 0% 87%",
          "neutral-disabled-text": "223 12% 89%",
          "neutral-light": "225 14% 95%",
          "neutral-dark-white": "220 100% 99%",
          "neutral-white": "0 0% 100%",
          "button-disabled": "221 38% 95%",
          "button-disabled-text": "223 20% 75%",
          "button-text": "0 0% 100%",
          "input": "0 0% 87%",
          "input-light": "225 14% 95%",
          "input-fill": "0 0% 99%",
          "input-focused": "221 87% 52%, 0.3"
        },
        "dark": {
          "primary": "221 92% 69%",
          "disabled": "227 39% 24%",
          "disabled-dark": "227 32% 39%",
          "disabled-light-dark": "229 23% 14%",
          "disabled-light": "227 39% 24%",
          "primary-30": "222 75% 82%",
          "primary-15": "229 31% 28%",
          "primary-5": "228 31% 19%",
          "background": "229 19% 11%",
          "primary-focused": "222 74% 62%",
          "primary-soft": "hsla(222, 92%, 70%, 0.1)",
          "primary-hard": "hsl(222, 92%, 70%, 0.15)",
          "secondary": "15 97% 60%",
          "secondary-light": "6 29% 21%",
          "tertiary": "54 97% 60%",
          "error": "0 100% 50%",
          "error-light": "352 48% 17%",
          "success": "147 100% 40%",
          "success-light": "159 54% 15%",
          "warning": "54 76% 52%",
          "warning-light": "56 29% 19%",
          "neutral-black": "0 0% 100%",
          "neutral-light-black": "0 0% 93%",
          "neutral-grey": "0 0% 60%",
          "neutral": "229 18% 36%",
          "neutral-disabled-text": "220 14% 58%",
          "neutral-light": "221 18% 20%",
          "neutral-dark-white": "220 14% 58%",
          "neutral-white": "0 0% 12%",
          "button-disabled": "229 31% 21%",
          "button-disabled-text": "228 18% 44%",
          "button-text": "0 0% 100%",
          "input": "0 0% 46%",
          "input-light": "227 18% 21%",
          "input-fill": "229 19% 14%",
          "input-focused": "221 92% 69%, 0.3"
        }
      },
      "css": {
        "@layer base": {
          "body": {
            "@apply bg-background text-neutral-black": {}
          },
          "::-webkit-scrollbar-track": {
            "-webkit-box-shadow": "inset 0 0 6px rgba(0,0,0,0.3)",
            "border-radius": "10px",
            "background-color": "#F0F0F0"
          },
          "::-webkit-scrollbar": {
            "width": "12px",
            "background-color": "#F0F0F0"
          },
          "::-webkit-scrollbar-thumb": {
            "border-radius": "10px",
            "-webkit-box-shadow": "inset 0 0 6px rgba(0,0,0,.3)",
            "background-color": "#5F5D5C"
          },
          "::-webkit-calendar-picker-indicator": {
            "display": "none"
          },
          "input:-webkit-autofill": {
            "-webkit-text-fill-color": "black !important",
            "caret-color": "black"
          },
          ".dark input:-webkit-autofill": {
            "-webkit-text-fill-color": "white !important",
            "caret-color": "white"
          },
          "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active": {
            "-webkit-box-shadow": "0 0 0 30px white inset !important"
          },
          ".dark input:-webkit-autofill, .dark input:-webkit-autofill:hover, .dark input:-webkit-autofill:focus, .dark input:-webkit-autofill:active": {
            "-webkit-box-shadow": "0 0 0 30px #171922 inset !important"
          },
          ".custom--dropdown-container .dropdown-menu::-webkit-scrollbar": {
            "width": "8px"
          },
          ".TraDatePicker-root input::-webkit-outer-spin-button, .TraDatePicker-root input::-webkit-inner-spin-button": {
            "-webkit-appearance": "none",
            "margin": "0"
          },
          ".TraDatePicker-root input[type=\"number\"]": {
            "-moz-appearance": "textfield"
          },
          ".TraPagination-container input::-webkit-outer-spin-button, .TraPagination-container input::-webkit-inner-spin-button": {
            "-webkit-appearance": "none",
            "margin": "0"
          },
          ".TraPagination-container input[type=\"number\"]": {
            "-moz-appearance": "textfield"
          }
        },
        "@utility content-required": {
          "content": "'*'"
        },
        "@utility container": {
          "margin-inline": "auto",
          "padding": "2rem"
        }
      }
    },
    {
      "name": "typhography",
      "type": "registry:style",
      "title": "TRA UI Typography",
      "description": "Typography design tokens for TRA UI Kit",
      "cssVars": {
        "theme": {
          "font-sans": "Inter, sans-serif",
          "text-h1": "clamp(2.25rem, 5vw + 1rem, 3.625rem)",
          "text-h1--line-height": "1.5",
          "text-h1--font-weight": "500",
          "text-h2": "clamp(1.875rem, 4vw + 1rem, 3rem)",
          "text-h2--line-height": "1.5",
          "text-h2--font-weight": "500",
          "text-h3": "clamp(1.5rem, 3vw + 1rem, 2.5rem)",
          "text-h3--line-height": "1.5",
          "text-h3--font-weight": "500",
          "text-h4": "clamp(1.25rem, 2vw + 1rem, 1.75rem)",
          "text-h4--line-height": "1.5",
          "text-h4--font-weight": "500",
          "text-h5": "clamp(1.1rem, 1.5vw + 1rem, 1.438rem)",
          "text-h5--line-height": "1.5",
          "text-h5--font-weight": "500",
          "text-h6": "clamp(1rem, 1vw + 1rem, 1.188rem)",
          "text-h6--line-height": "1.5",
          "text-h6--font-weight": "500",
          "text-body-regular": "1rem",
          "text-body-regular--line-height": "1.5",
          "text-body-regular--font-weight": "400",
          "text-body-s-regular": "0.875rem",
          "text-body-s-regular--line-height": "1.4",
          "text-body-s-regular--font-weight": "400",
          "text-body-xs-regular": "0.75rem",
          "text-body-xs-regular--line-height": "1.5",
          "text-body-xs-regular--font-weight": "400",
          "text-body-xxs-regular": "0.625rem",
          "text-body-xxs-regular--line-height": "1.4",
          "text-body-xxs-regular--font-weight": "400",
          "text-body-medium": "1rem",
          "text-body-medium--line-height": "1.5",
          "text-body-medium--font-weight": "500",
          "text-body-s-medium": "0.875rem",
          "text-body-s-medium--line-height": "1.4",
          "text-body-s-medium--font-weight": "500",
          "text-body-xs-medium": "0.75rem",
          "text-body-xs-medium--line-height": "1.5",
          "text-body-xs-medium--font-weight": "500",
          "text-body-xxs-medium": "0.625rem",
          "text-body-xxs-medium--line-height": "1.4",
          "text-body-xxs-medium--font-weight": "500"
        }
      }
    },
    {
      "name": "utils",
      "type": "registry:lib",
      "title": "Utils",
      "description": "Utility functions including cn for class name merging",
      "files": [
        {
          "path": "registry/tra-kit/utils/utils.ts",
          "type": "registry:lib",
          "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n \nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}"
        }
      ],
      "dependencies": ["clsx", "tailwind-merge"]
    },
    {
      "name": "accordion",
      "type": "registry:ui",
      "title": "Accordion",
      "description": "An accordion component that can be used to display collapsible content.",
      "files": [
        {
          "path": "registry/tra-kit/components/accordion.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "avatar",
      "type": "registry:ui",
      "title": "Avatar",
      "description": "An avatar component that can be used to display user profile pictures.",
      "files": [
        {
          "path": "registry/tra-kit/components/avatar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "back-to-top-button",
      "type": "registry:ui",
      "title": "Back to Top Button",
      "description": "A back to top button component that can be used to quickly scroll to the top of the page.",
      "files": [
        {
          "path": "registry/tra-kit/components/back-to-top-button.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/button"]
    },
    {
      "name": "badge",
      "type": "registry:ui",
      "title": "Badge",
      "description": "A badge component that can be used to display small pieces of information.",
      "files": [
        {
          "path": "registry/tra-kit/components/badge.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "button",
      "type": "registry:ui",
      "title": "Button",
      "description": "A button component that can be used to trigger an action.",
      "files": [
        {
          "path": "registry/tra-kit/components/button.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": ["tailwindcss"],
      "registryDependencies": ["@tra-kit/loading-spinner"]
    },
    {
      "name": "calendar",
      "type": "registry:ui",
      "title": "Calendar",
      "description": "A calendar component that can be used to select dates.",
      "files": [
        {
          "path": "registry/tra-kit/components/calendar.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/button"]
    },
    {
      "name": "checkbox",
      "type": "registry:ui",
      "title": "Checkbox",
      "description": "A checkbox component that can be used to select options.",
      "files": [
        {
          "path": "registry/tra-kit/components/checkbox.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/label"]
    },
    {
      "name": "chip",
      "type": "registry:ui",
      "title": "Chip",
      "description": "A chip component that can be used to display small blocks of information.",
      "files": [
        {
          "path": "registry/tra-kit/components/chip.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "container",
      "type": "registry:ui",
      "title": "Container",
      "description": "A container component that can be used to contain and center content.",
      "files": [
        {
          "path": "registry/tra-kit/components/container.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "date-picker",
      "type": "registry:ui",
      "title": "Date Picker",
      "description": "A date picker component that can be used to select dates.",
      "files": [
        {
          "path": "registry/tra-kit/components/date-picker.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": ["date-fns", "react-day-picker"],
      "registryDependencies": [
        "@tra-kit/button",
        "@tra-kit/calendar",
        "@tra-kit/label",
        "@tra-kit/popover"
      ]
    },
    {
      "name": "dialog",
      "type": "registry:ui",
      "title": "Dialog",
      "description": "A dialog component that can be used to display a modal window.",
      "files": [
        {
          "path": "registry/tra-kit/components/dialog.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "drawer",
      "type": "registry:ui",
      "title": "Drawer",
      "description": "A drawer component that can be used to display a modal window.",
      "files": [
        {
          "path": "registry/tra-kit/components/drawer.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/button"]
    },
    {
      "name": "dropdown",
      "type": "registry:ui",
      "title": "Dropdown",
      "description": "A dropdown component that can be used to display a list of options.",
      "files": [
        {
          "path": "registry/tra-kit/components/dropdown.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/popover"]
    },
    {
      "name": "information-status",
      "type": "registry:ui",
      "title": "Information Status",
      "description": "An information status component that can be used to display status messages.",
      "files": [
        {
          "path": "registry/tra-kit/components/information-status.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "input",
      "type": "registry:ui",
      "title": "Input",
      "description": "An input component that can be used to enter text.",
      "files": [
        {
          "path": "registry/tra-kit/components/input.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/button"]
    },
    {
      "name": "label",
      "type": "registry:ui",
      "title": "Label",
      "description": "A label component that can be used to describe form elements.",
      "files": [
        {
          "path": "registry/tra-kit/components/label.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/tooltip"]
    },
    {
      "name": "language-select",
      "type": "registry:ui",
      "title": "Language Select",
      "description": "A language select component that can be used to select a language.",
      "files": [
        {
          "path": "registry/tra-kit/components/language-select.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/select"]
    },
    {
      "name": "language-toggle",
      "type": "registry:ui",
      "title": "Language Toggle",
      "description": "A language toggle component that can be used to switch languages.",
      "files": [
        {
          "path": "registry/tra-kit/components/language-toggle.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/button"]
    },
    {
      "name": "loader",
      "type": "registry:ui",
      "title": "Loader",
      "description": "A loader component that can be used to indicate loading state.",
      "files": [
        {
          "path": "registry/tra-kit/components/loader.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/loading-spinner", "@tra-kit/loading-linear"]
    },
    {
      "name": "loading-linear",
      "type": "registry:ui",
      "title": "Loading Linear",
      "description": "A loading linear component that can be used to indicate loading state.",
      "files": [
        {
          "path": "registry/tra-kit/components/loading-linear.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "loading-spinner",
      "type": "registry:ui",
      "title": "Loading Spinner",
      "description": "A loading spinner component that can be used to indicate loading state.",
      "files": [
        {
          "path": "registry/tra-kit/components/loading-spinner.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "notification",
      "type": "registry:ui",
      "title": "Notification",
      "description": "A flexible notification system with multiple themes, animations, and positioning options for displaying user feedback.",
      "dependencies": ["class-variance-authority", "@phosphor-icons/react"],
      "registryDependencies": ["@tra-kit/button"],
      "files": [
        {
          "path": "registry/tra-kit/components/notification.tsx",
          "type": "registry:ui"
        },
        {
          "path": "registry/tra-kit/contexts/notification/NotificationProvider.tsx",
          "type": "registry:file",
          "target": "contexts/notification/NotificationProvider.tsx"
        },
        {
          "path": "registry/tra-kit/contexts/notification/NotificationContainer.tsx",
          "type": "registry:file",
          "target": "contexts/notification/NotificationContainer.tsx"
        }
      ]
    },
    {
      "name": "pagination",
      "type": "registry:ui",
      "title": "Pagination",
      "description": "A pagination component that can be used to navigate through pages.",
      "files": [
        {
          "path": "registry/tra-kit/components/pagination.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/button", "@tra-kit/label"]
    },
    {
      "name": "popover",
      "type": "registry:ui",
      "title": "Popover",
      "description": "A popover component that can be used to display additional information.",
      "files": [
        {
          "path": "registry/tra-kit/components/popover.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "progress-bar",
      "type": "registry:ui",
      "title": "Progress Bar",
      "description": "A progress bar component that can be used to display the progress of a task.",
      "files": [
        {
          "path": "registry/tra-kit/components/progress-bar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "radio-buttons",
      "type": "registry:ui",
      "title": "Radio Buttons",
      "description": "A radio buttons component that can be used to select one option from a set.",
      "files": [
        {
          "path": "registry/tra-kit/components/radio-buttons.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "search-field",
      "type": "registry:ui",
      "title": "Search Field",
      "description": "A search field component that can be used to enter search queries.",
      "files": [
        {
          "path": "registry/tra-kit/components/search-field.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/text-field"]
    },
    {
      "name": "select",
      "type": "registry:ui",
      "title": "Select",
      "description": "A select component that can be used to display a dropdown list of options.",
      "registryDependencies": ["@tra-kit/popover", "@tra-kit/label", "@tra-kit/button"],
      "files": [
        {
          "path": "registry/tra-kit/components/select.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "sidebar",
      "type": "registry:ui",
      "title": "Sidebar",
      "description": "A sidebar component that can be used to display a navigation menu.",
      "registryDependencies": ["@tra-kit/button"],
      "files": [
        {
          "path": "registry/tra-kit/components/sidebar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "skeleton",
      "type": "registry:ui",
      "title": "Skeleton",
      "description": "A skeleton component that can be used to display loading placeholders.",
      "files": [
        {
          "path": "registry/tra-kit/components/skeleton.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "switch",
      "type": "registry:ui",
      "title": "Switch",
      "description": "A switch component that can be used to toggle between two states.",
      "files": [
        {
          "path": "registry/tra-kit/components/switch.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/label"]
    },
    {
      "name": "table",
      "type": "registry:ui",
      "title": "Table",
      "description": "A table component that can be used to display data in a tabular format.",
      "files": [
        {
          "path": "registry/tra-kit/components/table.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "tabs",
      "type": "registry:ui",
      "title": "Tabs",
      "description": "A tabs component that can be used to switch between different views or sections.",
      "files": [
        {
          "path": "registry/tra-kit/components/tabs.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "text-field",
      "type": "registry:ui",
      "title": "Text Field",
      "description": "A text field component that can be used to enter text.",
      "files": [
        {
          "path": "registry/tra-kit/components/text-field.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/input", "@tra-kit/label"]
    },
    {
      "name": "theme-mode-toggle",
      "type": "registry:ui",
      "title": "Theme Mode Toggle",
      "description": "A theme mode toggle component that can be used to switch between light and dark modes.",
      "files": [
        {
          "path": "registry/tra-kit/components/theme-mode-toggle.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": ["@tra-kit/button"]
    },
    {
      "name": "tooltip",
      "type": "registry:ui",
      "title": "Tooltip",
      "description": "A tooltip component that can be used to display additional information.",
      "files": [
        {
          "path": "registry/tra-kit/components/tooltip.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": ["class-variance-authority"]
    }
  ]
}