{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "application-form", "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/application-form.tsx", "type": "registry:component", "target": "@components/tirazkit/application-form.tsx", "content": "\"use client\";\nimport { useRef, useState, type FormEvent } from \"react\";\nimport { CircleCheck } from \"lucide-react\";\nimport { useKit } from \"./theme\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Textarea } from \"./textarea\";\nimport { Select } from \"./select\";\nimport { Checkbox } from \"./checkbox\";\nimport { Alert } from \"./alert\";\nexport type ApplicationData = {\n name: string;\n email: string;\n category: string;\n details: string;\n};\nexport function ApplicationForm({\n onSubmit,\n demo = false,\n}: {\n onSubmit: (data: ApplicationData) => Promise | string;\n demo?: boolean;\n}) {\n const { locale } = useKit();\n const ar = locale === \"ar\";\n const [step, setStep] = useState(0);\n const [data, setData] = useState({\n name: \"\",\n email: \"\",\n category: \"general\",\n details: \"\",\n });\n const [agreed, setAgreed] = useState(false);\n const [errors, setErrors] = useState>({});\n const [busy, setBusy] = useState(false);\n const [receipt, setReceipt] = useState(\"\");\n const heading = useRef(null);\n const form = useRef(null);\n const labels = ar\n ? [\"البيانات الشخصية\", \"تفاصيل الطلب\", \"المراجعة\"]\n : [\"Your details\", \"Request details\", \"Review\"];\n const change = (key: keyof ApplicationData, value: string) => {\n setData((v) => ({ ...v, [key]: value }));\n setErrors((v) => ({ ...v, [key]: \"\" }));\n };\n function navigate(value: number) {\n setStep(value);\n setErrors({});\n requestAnimationFrame(() => heading.current?.focus());\n }\n async function submit(event: FormEvent) {\n event.preventDefault();\n if (busy) return;\n const next: Record = {};\n if (step === 0) {\n if (!data.name.trim())\n next.name = ar ? \"أدخل اسمك الكامل.\" : \"Enter your full name.\";\n if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(data.email.trim()))\n next.email = ar\n ? \"أدخل بريدًا إلكترونيًا صحيحًا.\"\n : \"Enter a valid email.\";\n }\n if (step === 1 && data.details.trim().length < 10)\n next.details = ar\n ? \"اكتب 10 أحرف على الأقل لتوضيح طلبك.\"\n : \"Use at least 10 characters to describe your request.\";\n if (step === 2 && !agreed)\n next.agreed = ar\n ? \"أكد صحة البيانات للمتابعة.\"\n : \"Confirm your details to continue.\";\n setErrors(next);\n if (Object.keys(next).length) {\n requestAnimationFrame(() =>\n form.current\n ?.querySelector('[aria-invalid=\"true\"]')\n ?.focus(),\n );\n return;\n }\n if (step < 2) {\n navigate(step + 1);\n return;\n }\n setBusy(true);\n try {\n const result = await onSubmit({\n ...data,\n name: data.name.trim(),\n email: data.email.trim(),\n details: data.details.trim(),\n });\n if (!result) throw new Error(\"Missing confirmation\");\n setReceipt(result);\n } catch {\n setErrors({\n submit: ar\n ? \"لم يُرسل الطلب. تحقق من الاتصال وحاول مرة أخرى.\"\n : \"Your request was not sent. Check your connection and try again.\",\n });\n } finally {\n setBusy(false);\n }\n }\n if (receipt)\n return (\n
\n
\n \n

\n {demo\n ? ar\n ? \"اكتملت تجربة النموذج\"\n : \"Form preview completed\"\n : ar\n ? \"تم إرسال الطلب\"\n : \"Request submitted\"}\n

\n
\n \n {receipt}\n \n {\n setReceipt(\"\");\n setData({ name: \"\", email: \"\", category: \"general\", details: \"\" });\n setAgreed(false);\n navigate(0);\n }}\n >\n {ar ? \"بدء طلب جديد\" : \"Start a new request\"}\n \n
\n );\n return (\n
\n
\n

\n {ar ? \"تقديم طلب جديد\" : \"New application\"}\n

\n

\n {ar\n ? \"أكمل بياناتك، ثم راجع طلبك قبل الإرسال.\"\n : \"Fill in your details, then review before submitting.\"}\n

\n
\n \n {labels.map((label, i) => (\n
  • \n {i < step ? : i + 1}\n {label}\n
    • \n ))}\n \n
    \n {step === 0 && (\n <>\n change(\"name\", e.target.value)}\n error={errors.name}\n />\n change(\"email\", e.target.value)}\n error={errors.email}\n />\n \n )}\n {step === 1 && (\n <>\n change(\"category\", v)}\n options={[\n {\n value: \"general\",\n label: ar ? \"استفسار عام\" : \"General enquiry\",\n },\n {\n value: \"support\",\n label: ar ? \"دعم فني\" : \"Technical support\",\n },\n { value: \"suggestion\", label: ar ? \"اقتراح\" : \"Suggestion\" },\n ]}\n />\n change(\"details\", e.target.value)}\n error={errors.details}\n />\n \n )}\n {step === 2 && (\n <>\n
    \n {[\n [ar ? \"الاسم\" : \"Name\", data.name],\n [ar ? \"البريد الإلكتروني\" : \"Email\", data.email],\n [\n ar ? \"النوع\" : \"Type\",\n {\n general: ar ? \"استفسار عام\" : \"General enquiry\",\n support: ar ? \"دعم فني\" : \"Technical support\",\n suggestion: ar ? \"اقتراح\" : \"Suggestion\",\n }[data.category as \"general\" | \"support\" | \"suggestion\"] ||\n data.category,\n ],\n [ar ? \"التفاصيل\" : \"Details\", data.details],\n ].map(([label, value]) => (\n
    \n
    {label}
    \n
    {value}
    \n
    \n ))}\n
    \n {\n setAgreed(v === true);\n setErrors({});\n }}\n aria-invalid={!!errors.agreed}\n />\n {errors.agreed && (\n

    \n {errors.agreed}\n

    \n )}\n \n )}\n {errors.submit && }\n
    \n navigate(step - 1)}\n >\n {ar ? \"السابق\" : \"Back\"}\n \n \n
    \n {demo && (\n

    \n {ar\n ? \"نموذج تجريبي. تبقى البيانات داخل متصفحك لهذه الجلسة فقط.\"\n : \"Demo form. Data stays in your browser for this session only.\"}\n

    \n )}\n \n
    \n );\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 \n \n \n {children}\n \n \n \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 & {\n direction?: React.ComponentProps[\"dir\"]\n}) {\n return (\n \n {children}\n \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/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/button.tsx", "type": "registry:component", "target": "@components/tirazkit/button.tsx", "content": "\"use client\";\nimport type { ComponentProps } from \"react\";\nimport { Button as BaseButton } from \"./primitives/button\";\nimport { LoaderCircle } from \"lucide-react\";\nimport \"./tirazkit.css\";\nexport function Button({\n variant = \"primary\",\n size = \"md\",\n loading = false,\n className = \"\",\n children,\n disabled,\n type = \"button\",\n ...props\n}: Omit, \"variant\" | \"size\"> & {\n variant?: \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\";\n size?: \"sm\" | \"md\" | \"lg\";\n loading?: boolean;\n}) {\n return (\n \n {loading ? : null}\n {children}\n \n );\n}\n" }, { "path": "components/ui/button.tsx", "type": "registry:component", "target": "@components/tirazkit/primitives/button.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 buttonVariants = cva(\n \"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40\",\n outline:\n \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n xs: \"h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n \"icon-xs\": \"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot.Root : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\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/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 & {\n label: string;\n hint?: string;\n error?: string;\n}) {\n const generated = useId();\n const fieldId = id || generated;\n return (\n
    \n \n \n \n {error || hint}\n \n
    \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 \n )\n}\n\nexport { Input }\n" }, { "path": "registry/tirazkit/textarea.tsx", "type": "registry:component", "target": "@components/tirazkit/textarea.tsx", "content": "\"use client\";\nimport { useId, useState, type ComponentProps } from \"react\";\nimport { Textarea as BaseTextarea } from \"./primitives/textarea\";\nimport \"./tirazkit.css\";\nexport function Textarea({\n label,\n hint,\n error,\n id,\n rows = 4,\n className = \"\",\n onChange,\n ...props\n}: ComponentProps & {\n label: string;\n hint?: string;\n error?: string;\n}) {\n const generated = useId();\n const fieldId = id || generated;\n const [length, setLength] = useState(String(props.defaultValue || \"\").length);\n const count = props.value !== undefined ? String(props.value).length : length;\n return (\n
    \n \n {\n setLength(e.target.value.length);\n onChange?.(e);\n }}\n />\n
    \n \n {error || hint}\n \n {props.maxLength ? (\n \n {count} / {props.maxLength}\n \n ) : null}\n
    \n
    \n );\n}\n" }, { "path": "components/ui/textarea.tsx", "type": "registry:component", "target": "@components/tirazkit/primitives/textarea.tsx", "content": "// MIT License. Copyright (c) 2023 shadcn. See LICENSE.txt.\nimport * as React from \"react\"\n\nimport { cn } from \"../utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n return (\n \n )\n}\n\nexport { Textarea }\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
    \n \n \n \n \n \n \n {options.map((option) => (\n \n {option.label}\n \n ))}\n \n \n
    \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) {\n return \n}\n\nfunction SelectGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \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/checkbox.tsx", "type": "registry:component", "target": "@components/tirazkit/checkbox.tsx", "content": "\"use client\";\nimport { useId, type ComponentProps } from \"react\";\nimport { Checkbox as BaseCheckbox } from \"./primitives/checkbox\";\nimport \"./tirazkit.css\";\nexport function Checkbox({\n label,\n description,\n id,\n className = \"\",\n ...props\n}: ComponentProps & {\n label: string;\n description?: string;\n}) {\n const generated = useId();\n const fieldId = id || generated;\n return (\n \n );\n}\n" }, { "path": "components/ui/checkbox.tsx", "type": "registry:component", "target": "@components/tirazkit/primitives/checkbox.tsx", "content": "// MIT License. Copyright (c) 2023 shadcn. See LICENSE.txt.\n\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"lucide-react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../utils\"\n\nfunction Checkbox({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n )\n}\n\nexport { Checkbox }\n" }, { "path": "registry/tirazkit/alert.tsx", "type": "registry:component", "target": "@components/tirazkit/alert.tsx", "content": "import type { ReactNode } from \"react\";\nimport { CircleCheck, CircleAlert, Info, TriangleAlert } from \"lucide-react\";\nimport {\n Alert as BaseAlert,\n AlertTitle,\n AlertDescription,\n} from \"./primitives/alert\";\nimport \"./tirazkit.css\";\nexport function Alert({\n title,\n tone = \"info\",\n children,\n}: {\n title: string;\n tone?: \"info\" | \"success\" | \"warning\" | \"danger\";\n children?: ReactNode;\n}) {\n const Icon = {\n info: Info,\n success: CircleCheck,\n warning: TriangleAlert,\n danger: CircleAlert,\n }[tone];\n return (\n \n \n
    \n {title}\n {children ? (\n \n {children}\n \n ) : null}\n
    \n \n );\n}\n" }, { "path": "components/ui/alert.tsx", "type": "registry:component", "target": "@components/tirazkit/primitives/alert.tsx", "content": "// MIT License. Copyright (c) 2023 shadcn. See LICENSE.txt.\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../utils\"\n\nconst alertVariants = cva(\n \"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n {\n variants: {\n variant: {\n default: \"bg-card text-card-foreground\",\n destructive:\n \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDescription({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport { Alert, AlertTitle, AlertDescription }\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 . 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." }