{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "services-grid",
  "title": "دليل الخدمات",
  "type": "registry:block",
  "description": "دليل الخدمات",
  "author": "Tirazkit contributors",
  "dependencies": [
    "class-variance-authority@0.7.1",
    "clsx@2.1.1",
    "lucide-react@^1.31.0",
    "radix-ui@^1.6.7",
    "tailwind-merge@3.6.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/tirazkit/services-grid.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/services-grid.tsx",
      "content": "\"use client\";\nimport { useState } from \"react\";\nimport { Input } from \"./input\";\nimport { Select } from \"./select\";\nimport { ServiceCard } from \"./service-card\";\nimport { useKit } from \"./theme\";\nexport type Service = {\n  id: string;\n  title: string;\n  description: string;\n  category: string;\n  href: string;\n  duration?: string;\n};\nexport function ServicesGrid({ services }: { services: Service[] }) {\n  const { locale } = useKit();\n  const ar = locale === \"ar\";\n  const [query, setQuery] = useState(\"\");\n  const [category, setCategory] = useState(\"all\");\n  const categories = [...new Set(services.map((s) => s.category))];\n  const shown = services.filter(\n    (s) =>\n      (category === \"all\" || s.category === category) &&\n      `${s.title} ${s.description}`\n        .toLocaleLowerCase(locale)\n        .includes(query.trim().toLocaleLowerCase(locale)),\n  );\n  return (\n    <section className=\"tk-block\">\n      <div className=\"tk-block-header\">\n        <h2 className=\"tk-heading\">\n          {ar ? \"خدماتك، في مكان واحد\" : \"Your services, in one place\"}\n        </h2>\n        <p className=\"tk-muted\">\n          {ar\n            ? \"ابحث عن الخدمة المناسبة وابدأ رحلتك بخطوات واضحة.\"\n            : \"Find the right service and get started with clear steps.\"}\n        </p>\n      </div>\n      <div className=\"tk-services-filter\">\n        <Input\n          label={ar ? \"ابحث عن خدمة\" : \"Search services\"}\n          name=\"service-search\"\n          autoComplete=\"off\"\n          placeholder={\n            ar ? \"اسم الخدمة أو كلمة مفتاحية…\" : \"Service name or keyword…\"\n          }\n          value={query}\n          onChange={(e) => setQuery(e.target.value)}\n        />\n        <Select\n          label={ar ? \"الفئة\" : \"Category\"}\n          value={category}\n          onValueChange={setCategory}\n          options={[\n            { value: \"all\", label: ar ? \"جميع الخدمات\" : \"All services\" },\n            ...categories.map((c) => ({ value: c, label: c })),\n          ]}\n        />\n      </div>\n      <p className=\"tk-muted\" role=\"status\">\n        {new Intl.NumberFormat(locale).format(shown.length)}{\" \"}\n        {ar ? \"خدمات متاحة\" : \"services available\"}\n      </p>\n      <div className=\"tk-block-grid\">\n        {shown.map((service) => (\n          <ServiceCard key={service.id} {...service} />\n        ))}\n      </div>\n      {!shown.length && (\n        <p className=\"tk-empty\">\n          {ar\n            ? \"لم نجد خدمة مطابقة. جرّب كلمة أخرى أو غيّر الفئة.\"\n            : \"No services match. Try another keyword or category.\"}\n        </p>\n      )}\n    </section>\n  );\n}\n"
    },
    {
      "path": "registry/tirazkit/input.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/input.tsx",
      "content": "\"use client\";\nimport { useId, type ComponentProps } from \"react\";\nimport { Input as BaseInput } from \"./primitives/input\";\nimport \"./tirazkit.css\";\nexport function Input({\n  label,\n  hint,\n  error,\n  id,\n  className = \"\",\n  ...props\n}: ComponentProps<typeof BaseInput> & {\n  label: string;\n  hint?: string;\n  error?: string;\n}) {\n  const generated = useId();\n  const fieldId = id || generated;\n  return (\n    <div className={`tk-field ${className}`}>\n      <label htmlFor={fieldId} className=\"tk-label\">\n        {label}\n        {props.required ? <span aria-hidden=\"true\"> *</span> : null}\n      </label>\n      <BaseInput\n        {...props}\n        id={fieldId}\n        className=\"tk-input\"\n        aria-invalid={Boolean(error)}\n        aria-describedby={error || hint ? `${fieldId}-help` : undefined}\n      />\n      <span\n        id={`${fieldId}-help`}\n        className={error ? \"tk-field-error\" : \"tk-field-hint\"}\n        aria-live=\"polite\"\n      >\n        {error || hint}\n      </span>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/input.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/primitives/input.tsx",
      "content": "// MIT License. Copyright (c) 2023 shadcn. See LICENSE.txt.\nimport * as React from \"react\"\n\nimport { cn } from \"../utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30\",\n        \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"
    },
    {
      "path": "lib/utils.ts",
      "type": "registry:component",
      "target": "@components/tirazkit/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/tirazkit/tirazkit.css",
      "type": "registry:file",
      "target": "@components/tirazkit/tirazkit.css",
      "content": ":root {\n  --tk-primary: #1b8354;\n  --tk-hover: #166a45;\n  --tk-pressed: #104631;\n  --tk-on-primary: #fff;\n  --tk-soft: #f3fcf6;\n  --tk-radius: 4px;\n  --tk-bg: #fff;\n  --tk-fg: #161616;\n  --tk-muted: #596472;\n  --tk-surface: #f8f9fb;\n  --tk-border: #d2d6db;\n  --tk-success: #067647;\n  --tk-success-bg: #ecfdf3;\n  --tk-warning: #935c08;\n  --tk-warning-bg: #fffaeb;\n  --tk-danger: #b42318;\n  --tk-danger-bg: #fef3f2;\n  --tk-info: #175cd3;\n  --tk-info-bg: #eff8ff;\n}\n.tk-scope {\n  --background: var(--tk-bg);\n  --foreground: var(--tk-fg);\n  --card: var(--tk-bg);\n  --card-foreground: var(--tk-fg);\n  --popover: var(--tk-bg);\n  --popover-foreground: var(--tk-fg);\n  --primary: var(--tk-primary);\n  --primary-foreground: var(--tk-on-primary);\n  --secondary: var(--tk-soft);\n  --secondary-foreground: var(--tk-fg);\n  --muted: var(--tk-surface);\n  --muted-foreground: var(--tk-muted);\n  --accent: var(--tk-soft);\n  --accent-foreground: var(--tk-fg);\n  --border: var(--tk-border);\n  --input: var(--tk-border);\n  --ring: var(--tk-primary);\n  --radius: var(--tk-radius);\n  --destructive: var(--tk-danger);\n  color: var(--tk-fg);\n  background: var(--tk-bg);\n  font-family: inherit;\n  line-height: 1.65;\n  text-align: start;\n  color-scheme: light;\n}\n.tk-scope[data-kit-mode=\"dark\"] {\n  color-scheme: dark;\n}\n.tk-scope * {\n  box-sizing: border-box;\n}\n.tk-scope :focus-visible {\n  outline: 2px solid var(--tk-primary);\n  outline-offset: 3px;\n}\n.tk-stack {\n  display: grid;\n  gap: 20px;\n}\n.tk-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n.tk-between {\n  justify-content: space-between;\n}\n.tk-muted {\n  color: var(--tk-muted);\n  font-size: 13px;\n}\n.tk-heading {\n  font-size: 24px;\n  font-weight: 600;\n  line-height: 1.5;\n}\n.tk-small {\n  font-size: 12px;\n}\n.tk-button {\n  font-family: inherit;\n  border-radius: var(--tk-radius);\n  border: 1px solid transparent;\n  font-weight: 500;\n  gap: 8px;\n  transition:\n    background-color 0.15s,\n    color 0.15s,\n    border-color 0.15s;\n  box-shadow: none;\n  cursor: pointer;\n  line-height: 1.5;\n}\n.tk-button-md {\n  min-height: 40px;\n  padding: 8px 16px;\n}\n.tk-button-sm {\n  min-height: 32px;\n  padding: 5px 12px;\n  font-size: 12px;\n}\n.tk-button-lg {\n  min-height: 48px;\n  padding: 12px 22px;\n}\n.tk-button-primary {\n  background: var(--tk-primary);\n  color: var(--tk-on-primary);\n}\n.tk-button-primary:hover {\n  background: var(--tk-hover);\n}\n.tk-button-primary:active {\n  background: var(--tk-pressed);\n}\n.tk-button-secondary {\n  background: var(--tk-soft);\n  color: var(--tk-primary);\n}\n.tk-button-secondary:hover {\n  background: color-mix(in srgb, var(--tk-soft), var(--tk-primary) 12%);\n}\n.tk-button-outline {\n  background: var(--tk-bg);\n  border-color: var(--tk-border);\n  color: var(--tk-fg);\n}\n.tk-button-outline:hover,\n.tk-button-ghost:hover {\n  background: var(--tk-surface);\n  border-color: var(--tk-border);\n}\n.tk-button-ghost {\n  background: transparent;\n  color: var(--tk-fg);\n}\n.tk-button-danger {\n  background: var(--tk-danger);\n  color: var(--tk-bg);\n}\n.tk-button-danger:hover {\n  filter: brightness(0.9);\n}\n.tk-button:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: auto;\n}\n.tk-field {\n  display: grid;\n  gap: 7px;\n  min-width: 0;\n  font-size: 13px;\n}\n.tk-label {\n  font-weight: 500;\n  display: block;\n}\n.tk-label em {\n  color: var(--tk-danger);\n  font-style: normal;\n}\n.tk-input {\n  width: 100%;\n  background: var(--tk-bg);\n  color: var(--tk-fg);\n  border: 1px solid var(--tk-border);\n  border-radius: var(--tk-radius);\n  min-height: 42px;\n  box-shadow: none;\n  padding: 10px 12px;\n  line-height: 1.5;\n  font-family: inherit;\n  font-size: 14px;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s;\n}\n.tk-input::placeholder {\n  color: var(--tk-muted);\n}\n.tk-input:hover:not(:disabled) {\n  border-color: var(--tk-muted);\n}\n.tk-input:focus-visible {\n  border-color: var(--tk-primary);\n  outline: none;\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-primary), transparent 85%);\n}\n.tk-input[aria-invalid=\"true\"] {\n  border-color: var(--tk-danger);\n}\n.tk-field-hint,\n.tk-field-error {\n  font-size: 12px;\n  line-height: 1.6;\n}\n.tk-field-hint {\n  color: var(--tk-muted);\n}\n.tk-field-error {\n  color: var(--tk-danger);\n}\n.tk-textarea {\n  resize: vertical;\n  min-height: 110px;\n}\n.tk-field-counter {\n  text-align: end;\n  color: var(--tk-muted);\n  font-size: 12px;\n}\n.tk-select-menu {\n  border-color: var(--tk-border);\n  border-radius: var(--tk-radius);\n  padding: 4px;\n}\n.tk-select-menu [data-slot=\"select-item\"] {\n  padding-inline-start: 30px;\n  padding-inline-end: 12px;\n  min-height: 38px;\n  border-radius: var(--tk-radius);\n  font-family: inherit;\n}\n.tk-select-menu [data-slot=\"select-item-indicator\"] {\n  inset-inline-start: 8px;\n  inset-inline-end: auto;\n}\n.tk-choice {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--tk-fg);\n}\n.tk-choice > span {\n  display: grid;\n  gap: 2px;\n}\n.tk-choice:has(:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.tk-checkbox {\n  width: 19px;\n  height: 19px;\n  min-width: 19px;\n  border-color: var(--tk-border);\n  border-radius: 4px;\n  box-shadow: none;\n  background: var(--tk-bg);\n}\n.tk-checkbox[data-state=\"checked\"],\n.tk-checkbox[data-state=\"indeterminate\"] {\n  background: var(--tk-primary);\n  color: var(--tk-on-primary);\n  border-color: var(--tk-primary);\n}\n.tk-switch {\n  height: 23px;\n  width: 41px;\n  background: var(--tk-border);\n  border: 2px solid transparent;\n  box-shadow: none;\n}\n.tk-switch[data-state=\"checked\"] {\n  background: var(--tk-primary);\n}\n.tk-switch [data-slot=\"switch-thumb\"] {\n  height: 17px;\n  width: 17px;\n  background: white;\n  transform: translateX(0);\n  transition: transform 0.15s;\n}\n.tk-switch [data-slot=\"switch-thumb\"][data-state=\"checked\"] {\n  transform: translateX(17px);\n}\n.tk-badge {\n  border-radius: 4px;\n  border: 1px solid color-mix(in srgb, currentColor, transparent 82%);\n  padding: 3px 8px;\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.5;\n  white-space: nowrap;\n}\n.tk-tone-primary {\n  color: var(--tk-primary);\n  background: var(--tk-soft);\n}\n.tk-tone-success {\n  color: var(--tk-success);\n  background: var(--tk-success-bg);\n}\n.tk-tone-warning {\n  color: var(--tk-warning);\n  background: var(--tk-warning-bg);\n}\n.tk-tone-danger {\n  color: var(--tk-danger);\n  background: var(--tk-danger-bg);\n}\n.tk-tone-info {\n  color: var(--tk-info);\n  background: var(--tk-info-bg);\n}\n.tk-tone-neutral {\n  color: var(--tk-muted);\n  background: var(--tk-surface);\n}\n.tk-alert {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  border: 1px solid color-mix(in srgb, currentColor, transparent 78%);\n  border-radius: var(--tk-radius);\n  padding: 16px;\n  text-align: start;\n}\n.tk-alert > svg {\n  position: static;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  margin-top: 2px;\n  transform: none;\n  color: inherit;\n}\n.tk-alert > div {\n  min-width: 0;\n}\n.tk-alert-title {\n  color: inherit;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.6;\n}\n.tk-alert-description {\n  display: block;\n  color: inherit;\n  opacity: 0.9;\n  font-size: 12px;\n  line-height: 1.8;\n  margin-top: 4px;\n}\n.tk-card {\n  background: var(--tk-bg);\n  color: var(--tk-fg);\n  border: 1px solid var(--tk-border);\n  border-radius: var(--tk-radius);\n  box-shadow: none;\n  gap: 18px;\n  padding: 22px;\n}\n.tk-card [data-slot=\"card-header\"],\n.tk-card [data-slot=\"card-content\"],\n.tk-card [data-slot=\"card-footer\"] {\n  padding: 0;\n}\n.tk-card-title {\n  font-size: 17px;\n  font-weight: 600;\n  line-height: 1.6;\n}\n.tk-card [data-slot=\"card-description\"] {\n  color: var(--tk-muted);\n  font-size: 13px;\n  line-height: 1.8;\n}\n.tk-card-footer {\n  padding-top: 16px !important;\n  border-top: 1px solid var(--tk-border);\n}\n.tk-tabs {\n  gap: 20px;\n}\n.tk-tabs-list {\n  background: transparent;\n  border-bottom: 1px solid var(--tk-border);\n  border-radius: 0;\n  width: 100%;\n  height: auto;\n  justify-content: flex-start;\n  padding: 0;\n  gap: 24px;\n}\n.tk-tab {\n  height: auto;\n  min-height: 42px;\n  flex: 0 0 auto;\n  background: transparent;\n  border: 0;\n  border-bottom: 3px solid transparent;\n  border-radius: 0;\n  padding: 8px 0;\n  color: var(--tk-muted);\n  font-family: inherit;\n  box-shadow: none !important;\n  font-size: 13px;\n}\n.tk-tab[data-state=\"active\"] {\n  background: transparent;\n  color: var(--tk-primary);\n  border-color: var(--tk-primary);\n}\n.tk-tab-content {\n  font-size: 14px;\n  line-height: 1.8;\n}\n.tk-accordion [data-slot=\"accordion-item\"] {\n  border-color: var(--tk-border);\n}\n.tk-accordion-trigger {\n  padding: 17px 0;\n  gap: 12px;\n  font-size: 14px;\n  text-align: start;\n  font-weight: 500;\n}\n.tk-accordion-content {\n  color: var(--tk-muted);\n  font-size: 13px;\n  line-height: 1.9;\n}\n.tk-dialog {\n  border: 1px solid var(--tk-border);\n  border-radius: var(--tk-radius);\n  padding: 28px;\n  gap: 14px;\n}\n.tk-dialog-close {\n  position: absolute;\n  inset-inline-end: 16px;\n  top: 14px;\n  padding: 6px;\n  cursor: pointer;\n  border-radius: 4px;\n}\n.tk-progress {\n  height: 7px;\n  background: var(--tk-border);\n  border-radius: 100px;\n}\n.tk-progress [data-slot=\"progress-indicator\"] {\n  background: var(--tk-primary);\n  transition: transform 0.25s;\n}\n.tk-progress-label {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 9px;\n  font-size: 13px;\n}\n.tk-breadcrumb {\n  font-size: 12px;\n  color: var(--tk-muted);\n}\n.tk-breadcrumb a:hover {\n  color: var(--tk-primary);\n}\n.tk-breadcrumb [aria-current] {\n  color: var(--tk-fg);\n  font-weight: 500;\n}\n.tk-pagination {\n  margin: 0;\n  width: auto;\n}\n.tk-pagination ul {\n  gap: 4px;\n}\n.tk-pagination .tk-button {\n  padding: 4px 9px;\n  min-width: 32px;\n}\n.tk-page-gap {\n  padding: 0 5px;\n  color: var(--tk-muted);\n}\n.tk-data-table {\n  width: 100%;\n  font-size: 13px;\n}\n.tk-data-table table {\n  width: 100%;\n  font-size: 13px;\n}\n.tk-data-table th,\n.tk-data-table td {\n  text-align: start;\n  padding: 13px 15px;\n  border-color: var(--tk-border);\n  white-space: nowrap;\n}\n.tk-data-table tr {\n  border-color: var(--tk-border);\n}\n.tk-data-table thead {\n  background: var(--tk-surface);\n  color: var(--tk-muted);\n}\n.tk-data-table tbody tr:hover {\n  background: var(--tk-surface);\n}\n.tk-sort-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  width: 100%;\n  font-weight: 500;\n}\n.tk-table-search {\n  position: relative;\n  margin-bottom: 18px;\n  max-width: 320px;\n}\n.tk-table-search > svg {\n  position: absolute;\n  inset-inline-start: 12px;\n  top: 41px;\n  color: var(--tk-muted);\n}\n.tk-table-search .tk-input {\n  padding-inline-start: 38px;\n}\n.tk-table-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  margin-top: 18px;\n  flex-wrap: wrap;\n}\n.tk-empty {\n  padding: 40px 16px;\n  text-align: center;\n  color: var(--tk-muted);\n}\n.tk-service-card {\n  height: 100%;\n  gap: 20px;\n}\n.tk-service-icon {\n  display: grid;\n  place-items: center;\n  width: 42px;\n  height: 42px;\n  color: var(--tk-primary);\n  background: var(--tk-soft);\n  border-radius: 50%;\n  margin-bottom: 14px;\n}\n.tk-service-card [data-slot=\"card-content\"] {\n  display: grid;\n  gap: 15px;\n}\n.tk-service-duration {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  color: var(--tk-muted);\n  font-size: 12px;\n}\n.tk-service-action {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: var(--tk-primary);\n  font-size: 13px;\n  font-weight: 600;\n  padding: 8px 0;\n}\n.tk-service-action:hover {\n  text-decoration: underline;\n  text-underline-offset: 4px;\n}\n.tk-upload {\n  border: 1px dashed var(--tk-border);\n  border-radius: var(--tk-radius);\n  background: var(--tk-surface);\n  padding: 22px;\n  text-align: center;\n  display: grid;\n  gap: 10px;\n  justify-items: center;\n}\n.tk-upload.is-dragging {\n  border-color: var(--tk-primary);\n  background: var(--tk-soft);\n}\n.tk-upload > svg {\n  color: var(--tk-primary);\n}\n.tk-upload-button {\n  font-size: 13px;\n  cursor: pointer;\n  color: var(--tk-primary);\n  font-weight: 600;\n  text-decoration: underline;\n  text-underline-offset: 4px;\n}\n.tk-file {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  border: 1px solid var(--tk-border);\n  padding: 10px;\n  border-radius: var(--tk-radius);\n  font-size: 12px;\n  min-width: 0;\n}\n.tk-file > span {\n  flex: 1;\n  overflow-wrap: anywhere;\n}\n.tk-file button {\n  padding: 5px;\n  color: var(--tk-danger);\n  cursor: pointer;\n}\n.tk-file-list {\n  display: grid;\n  gap: 8px;\n}\n.tk-upload input:focus-visible + label {\n  outline: 2px solid var(--tk-primary);\n}\n.tk-block {\n  padding: 28px;\n  display: grid;\n  gap: 26px;\n}\n.tk-block-header {\n  display: grid;\n  gap: 12px;\n}\n.tk-block-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 18px;\n}\n.tk-block-split {\n  display: grid;\n  grid-template-columns: minmax(0, 1.6fr) minmax(230px, 1fr);\n  gap: 24px;\n}\n.tk-block-stats {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 14px;\n}\n.tk-stat-value {\n  display: block;\n  font-size: 28px;\n  font-weight: 600;\n  margin-top: 8px;\n}\n.tk-stepper {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  justify-content: space-between;\n}\n.tk-stepper li {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  color: var(--tk-muted);\n  font-size: 12px;\n}\n.tk-stepper li[aria-current=\"step\"] {\n  color: var(--tk-primary);\n  font-weight: 600;\n}\n.tk-stepper span {\n  width: 28px;\n  height: 28px;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--tk-border);\n  border-radius: 50%;\n}\n.tk-stepper li[aria-current=\"step\"] span {\n  background: var(--tk-primary);\n  color: var(--tk-on-primary);\n  border-color: var(--tk-primary);\n}\n.tk-review {\n  display: grid;\n  gap: 12px;\n}\n.tk-review > div {\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--tk-border);\n  gap: 20px;\n  padding-bottom: 10px;\n}\n.tk-review dt {\n  color: var(--tk-muted);\n  font-size: 13px;\n}\n.tk-review dd {\n  font-size: 13px;\n  overflow-wrap: anywhere;\n  text-align: end;\n}\n.tk-block-note {\n  font-size: 12px;\n  color: var(--tk-muted);\n  line-height: 1.8;\n}\n.tk-services-filter {\n  display: flex;\n  align-items: end;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n.tk-services-filter > .tk-field {\n  flex: 1;\n  min-width: 180px;\n}\n@container kit-preview (max-width:620px) {\n  .tk-block-grid,\n  .tk-block-split {\n    grid-template-columns: 1fr;\n  }\n  .tk-block {\n    padding: 20px;\n  }\n  .tk-block-stats {\n    gap: 8px;\n  }\n  .tk-block-stats .tk-card {\n    padding: 14px;\n  }\n  .tk-stat-value {\n    font-size: 23px;\n  }\n  .tk-stepper li {\n    gap: 5px;\n    font-size: 11px;\n  }\n}\n@media (max-width: 600px) {\n  .tk-block-grid,\n  .tk-block-split {\n    grid-template-columns: 1fr;\n  }\n  .tk-block {\n    padding: 18px;\n  }\n  .tk-card {\n    padding: 18px;\n  }\n  .tk-block-stats {\n    gap: 8px;\n  }\n  .tk-block-stats .tk-card {\n    padding: 12px;\n  }\n  .tk-stat-value {\n    font-size: 23px;\n  }\n  .tk-stepper li {\n    gap: 4px;\n    font-size: 11px;\n  }\n  .tk-stepper {\n    gap: 6px;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .tk-scope *,\n  .tk-scope *::before,\n  .tk-scope *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n.tk-between {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.tk-progress-wrap {\n  gap: 9px;\n}\n.tk-card header .tk-muted {\n  margin-top: 6px;\n}\n.tk-card > .tk-muted {\n  font-size: 13px;\n  line-height: 1.9;\n}\n.tk-choice .tk-field-hint {\n  display: block;\n}\n.tk-card-footer .tk-button {\n  width: 100%;\n}\n"
    },
    {
      "path": "registry/tirazkit/select.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/select.tsx",
      "content": "\"use client\";\nimport { useId } from \"react\";\nimport {\n  Select as BaseSelect,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"./primitives/select\";\nimport { useKit } from \"./theme\";\nexport function Select({\n  label,\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  placeholder,\n  disabled,\n  name,\n}: {\n  label: string;\n  options: { value: string; label: string }[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  name?: string;\n}) {\n  const id = useId();\n  const kit = useKit();\n  return (\n    <div className=\"tk-field\">\n      <label className=\"tk-label\" id={`${id}-label`} htmlFor={id}>\n        {label}\n      </label>\n      <BaseSelect\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={onValueChange}\n        disabled={disabled}\n        dir={kit.dir}\n        name={name}\n      >\n        <SelectTrigger\n          id={id}\n          aria-labelledby={`${id}-label`}\n          className=\"tk-input tk-select\"\n        >\n          <SelectValue\n            placeholder={\n              placeholder ||\n              (kit.locale === \"ar\" ? \"اختر من القائمة…\" : \"Choose an option…\")\n            }\n          />\n        </SelectTrigger>\n        <SelectContent\n          className=\"tk-scope tk-select-menu\"\n          dir={kit.dir}\n          style={kit.style}\n          position=\"popper\"\n        >\n          {options.map((option) => (\n            <SelectItem key={option.value} value={option.value}>\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </BaseSelect>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/ui/select.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/primitives/select.tsx",
      "content": "// MIT License. Copyright (c) 2023 shadcn. See LICENSE.txt.\n\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../utils\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"select-item-indicator\"\n        className=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      >\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"
    },
    {
      "path": "registry/tirazkit/theme.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/theme.tsx",
      "content": "\"use client\";\nimport {\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { DirectionProvider } from \"./primitives/direction\";\nimport {\n  themeVariables,\n  type ThemeId,\n  type KitMode,\n  type KitLocale,\n} from \"./themes\";\nimport \"./tirazkit.css\";\nconst KitContext = createContext({\n  theme: \"dga\" as ThemeId,\n  mode: \"light\" as KitMode,\n  locale: \"ar\" as KitLocale,\n  overrides: {} as CSSProperties,\n});\nexport function useKit() {\n  const kit = useContext(KitContext);\n  return {\n    ...kit,\n    dir: kit.locale === \"ar\" ? (\"rtl\" as const) : (\"ltr\" as const),\n    style: {\n      ...themeVariables(kit.theme, kit.mode),\n      ...kit.overrides,\n    } as CSSProperties,\n  };\n}\nexport function Theme({\n  theme = \"dga\",\n  mode = \"light\",\n  locale = \"ar\",\n  children,\n  className = \"\",\n  overrides = {},\n}: {\n  theme?: ThemeId;\n  mode?: KitMode;\n  locale?: KitLocale;\n  children: ReactNode;\n  className?: string;\n  overrides?: CSSProperties;\n}) {\n  const dir = locale === \"ar\" ? \"rtl\" : \"ltr\";\n  return (\n    <KitContext.Provider value={{ theme, mode, locale, overrides }}>\n      <DirectionProvider dir={dir}>\n        <div\n          className={`tk-scope ${className}`}\n          data-kit-theme={theme}\n          data-kit-mode={mode}\n          lang={locale}\n          dir={dir}\n          style={\n            { ...themeVariables(theme, mode), ...overrides } as CSSProperties\n          }\n        >\n          {children}\n        </div>\n      </DirectionProvider>\n    </KitContext.Provider>\n  );\n}\n"
    },
    {
      "path": "components/ui/direction.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/primitives/direction.tsx",
      "content": "// MIT License. Copyright (c) 2023 shadcn. See LICENSE.txt.\n\"use client\"\n\nimport * as React from \"react\"\nimport { Direction } from \"radix-ui\"\n\nfunction DirectionProvider({\n  dir,\n  direction,\n  children,\n}: React.ComponentProps<typeof Direction.DirectionProvider> & {\n  direction?: React.ComponentProps<typeof Direction.DirectionProvider>[\"dir\"]\n}) {\n  return (\n    <Direction.DirectionProvider dir={direction ?? dir}>\n      {children}\n    </Direction.DirectionProvider>\n  )\n}\n\nconst useDirection = Direction.useDirection\n\nexport { DirectionProvider, useDirection }\n"
    },
    {
      "path": "registry/tirazkit/themes.ts",
      "type": "registry:component",
      "target": "@components/tirazkit/themes.ts",
      "content": "export const themes = {\n  dga: {\n    id: \"dga\",\n    name: \"كود المنصات\",\n    english: \"Platforms Code\",\n    description: \"أخضر واضح، تباين متوازن وهوية مستندة إلى مرجع كود المنصات.\",\n    primary: \"#1b8354\",\n    hover: \"#166a45\",\n    pressed: \"#104631\",\n    soft: \"#f3fcf6\",\n    radius: \"4px\",\n    palette: [\"#1b8354\", \"#166a45\", \"#dff6e7\", \"#161616\", \"#f3f4f6\"],\n  },\n  tiraz: {\n    id: \"tiraz\",\n    name: \"طراز\",\n    english: \"Tiraz\",\n    description: \"بنفسجي صريح ومساحات مريحة لمنتجاتك الرقمية.\",\n    primary: \"#5945e6\",\n    hover: \"#4935c9\",\n    pressed: \"#38249f\",\n    soft: \"#f1effe\",\n    radius: \"10px\",\n    palette: [\"#5945e6\", \"#9c8ff2\", \"#e5e0fc\", \"#27223d\", \"#f7f6fc\"],\n  },\n  ocean: {\n    id: \"ocean\",\n    name: \"محيط\",\n    english: \"Ocean\",\n    description: \"أزرق عميق وحواف ناعمة لواجهات هادئة وواضحة.\",\n    primary: \"#1262c5\",\n    hover: \"#0c4da0\",\n    pressed: \"#0b3975\",\n    soft: \"#eff6ff\",\n    radius: \"14px\",\n    palette: [\"#1262c5\", \"#38a3d1\", \"#d9effc\", \"#18324b\", \"#f2f8fc\"],\n  },\n  ink: {\n    id: \"ink\",\n    name: \"حبر\",\n    english: \"Ink\",\n    description: \"طابع محايد وحواف دقيقة تجعل المحتوى في المقدمة.\",\n    primary: \"#27272a\",\n    hover: \"#18181b\",\n    pressed: \"#09090b\",\n    soft: \"#f4f4f5\",\n    radius: \"2px\",\n    palette: [\"#27272a\", \"#71717a\", \"#d4d4d8\", \"#18181b\", \"#fafafa\"],\n  },\n} as const;\nexport type ThemeId = keyof typeof themes;\nexport type KitMode = \"light\" | \"dark\";\nexport type KitLocale = \"ar\" | \"en\";\nexport function themeVariables(id: ThemeId = \"dga\", mode: KitMode = \"light\") {\n  const theme = themes[id];\n  const dark = mode === \"dark\";\n  const primary =\n    dark && id === \"ink\"\n      ? \"#e4e4e7\"\n      : dark\n        ? {\n            dga: \"#4ad195\",\n            tiraz: \"#b2a5ff\",\n            ocean: \"#7cc4ff\",\n            ink: \"#e4e4e7\",\n          }[id]\n        : theme.primary;\n  return {\n    \"--tk-primary\": primary,\n    \"--tk-hover\": dark ? primary : theme.hover,\n    \"--tk-pressed\": dark ? primary : theme.pressed,\n    \"--tk-on-primary\": dark ? \"#101820\" : \"#ffffff\",\n    \"--tk-soft\": dark ? \"#252936\" : theme.soft,\n    \"--tk-radius\": theme.radius,\n    \"--tk-bg\": dark ? \"#151923\" : \"#ffffff\",\n    \"--tk-fg\": dark ? \"#f1f3f6\" : \"#161616\",\n    \"--tk-muted\": dark ? \"#b6bdc9\" : \"#596472\",\n    \"--tk-surface\": dark ? \"#1e2430\" : \"#f8f9fb\",\n    \"--tk-border\": dark ? \"#414957\" : \"#d2d6db\",\n    \"--tk-success\": dark ? \"#67d9a2\" : \"#067647\",\n    \"--tk-success-bg\": dark ? \"#142e26\" : \"#ecfdf3\",\n    \"--tk-warning\": dark ? \"#f7c86b\" : \"#935c08\",\n    \"--tk-warning-bg\": dark ? \"#322817\" : \"#fffaeb\",\n    \"--tk-danger\": dark ? \"#ff9b97\" : \"#b42318\",\n    \"--tk-danger-bg\": dark ? \"#3c2026\" : \"#fef3f2\",\n    \"--tk-info\": dark ? \"#8ac8ff\" : \"#175cd3\",\n    \"--tk-info-bg\": dark ? \"#1a2c43\" : \"#eff8ff\",\n  };\n}\n"
    },
    {
      "path": "registry/tirazkit/service-card.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/service-card.tsx",
      "content": "\"use client\";\nimport { ArrowLeft, ArrowRight, Clock3, FileText } from \"lucide-react\";\nimport { Card } from \"./card\";\nimport { Badge } from \"./badge\";\nimport { useKit } from \"./theme\";\nexport function ServiceCard({\n  title,\n  description,\n  duration,\n  href,\n  category,\n  actionLabel,\n}: {\n  title: string;\n  description: string;\n  duration?: string;\n  href: string;\n  category?: string;\n  actionLabel?: string;\n}) {\n  const { locale } = useKit();\n  const ar = locale === \"ar\";\n  const Arrow = ar ? ArrowLeft : ArrowRight;\n  return (\n    <Card className=\"tk-service-card\">\n      <div className=\"tk-between\">\n        <span className=\"tk-service-icon\">\n          <FileText size={23} aria-hidden=\"true\" />\n        </span>\n        {category ? <Badge tone=\"neutral\">{category}</Badge> : null}\n      </div>\n      <h3 className=\"tk-card-title\">{title}</h3>\n      <p className=\"tk-muted\">{description}</p>\n      {duration ? (\n        <p className=\"tk-service-duration\">\n          <Clock3 size={15} aria-hidden=\"true\" />\n          {duration}\n        </p>\n      ) : null}\n      <a className=\"tk-service-action\" href={href}>\n        {actionLabel || (ar ? \"ابدأ الخدمة\" : \"Start service\")}\n        <Arrow size={17} aria-hidden=\"true\" />\n      </a>\n    </Card>\n  );\n}\n"
    },
    {
      "path": "registry/tirazkit/card.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/card.tsx",
      "content": "import type { ReactNode } from \"react\";\nimport { Card as BaseCard } from \"./primitives/card\";\nimport \"./tirazkit.css\";\nexport function Card({\n  title,\n  description,\n  footer,\n  children,\n  className = \"\",\n}: {\n  title?: string;\n  description?: string;\n  footer?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n}) {\n  return (\n    <BaseCard className={`tk-card ${className}`}>\n      {title || description ? (\n        <header>\n          {title ? <h3 className=\"tk-card-title\">{title}</h3> : null}\n          {description ? <p className=\"tk-muted\">{description}</p> : null}\n        </header>\n      ) : null}\n      {children}\n      {footer ? <footer className=\"tk-card-footer\">{footer}</footer> : null}\n    </BaseCard>\n  );\n}\n"
    },
    {
      "path": "components/ui/card.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/primitives/card.tsx",
      "content": "// MIT License. Copyright (c) 2023 shadcn. See LICENSE.txt.\nimport * as React from \"react\"\n\nimport { cn } from \"../utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n"
    },
    {
      "path": "registry/tirazkit/badge.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/badge.tsx",
      "content": "import type { HTMLAttributes } from \"react\";\nimport { Badge as BaseBadge } from \"./primitives/badge\";\nimport \"./tirazkit.css\";\nexport function Badge({\n  tone = \"primary\",\n  className = \"\",\n  ...props\n}: HTMLAttributes<HTMLSpanElement> & {\n  tone?: \"primary\" | \"success\" | \"warning\" | \"danger\" | \"neutral\";\n}) {\n  return (\n    <BaseBadge {...props} className={`tk-badge tk-tone-${tone} ${className}`} />\n  );\n}\n"
    },
    {
      "path": "components/ui/badge.tsx",
      "type": "registry:component",
      "target": "@components/tirazkit/primitives/badge.tsx",
      "content": "// MIT License. Copyright (c) 2023 shadcn. See LICENSE.txt.\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"../utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90\",\n        outline:\n          \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        ghost: \"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 [a&]:hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n"
    },
    {
      "path": "registry/tirazkit/LICENSE.txt",
      "type": "registry:file",
      "target": "@components/tirazkit/LICENSE.txt",
      "content": "MIT License\n\nCopyright (c) 2026 Tirazkit contributors\nCopyright (c) 2023 shadcn (included shadcn/ui primitives)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\nFonts are licensed separately under the SIL Open Font License in\npublic/fonts/OFL.txt. Lucide icons retain their package's ISC license.\nDGA names and marks are not licensed by this software license.\n"
    }
  ],
  "categories": [
    "tirazkit"
  ],
  "docs": "Wrap components with <Theme theme=\"dga\" locale=\"ar\">. Includes four themes. Requires React 19, Tailwind CSS 4, and a shadcn-initialized project. Font inherits from your app. See /docs/installation. DGA-inspired independent implementation; not certified."
}