banhaten 0.1.2 → 0.1.3

package/package.json

@@ -1,65 +1,83 @@
-{
-  "name": "banhaten",
-  "version": "0.1.2",
-  "description": "Banhaten design system: an Arabic and English-first React design system with shadcn-style component installation.",
-  "type": "module",
-  "bin": {
-    "banhaten": "src/cli/index.js"
-  },
-  "files": [
-    "src",
-    "registry",
-    "tokens",
-    "banhaten.config.example.json",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build",
-    "build:railway": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build:railway",
-    "start": "node playground/scripts/serve-static.mjs playground/dist",
-    "check": "node --check src/cli/index.js && npm run cli:test && npm run tokens:check && npm run registry:check && npm run playground:test",
-    "cli:test": "node scripts/cli-integration-test.mjs",
-    "playground:build": "npm --prefix playground run build",
-    "playground:dev": "npm --prefix playground run dev",
-    "playground:test": "npm --prefix playground run test",
-    "registry:check": "node scripts/check-registry-mirrors.mjs",
-    "registry:sync": "node scripts/check-registry-mirrors.mjs --write",
-    "components:tokens:check": "node scripts/check-component-token-usage.mjs",
-    "smoke": "node src/cli/index.js list",
-    "tokens:build": "node scripts/generate-token-css.mjs --write",
-    "tokens:check": "node scripts/generate-token-css.mjs --check && node scripts/check-token-contract.mjs && npm run components:tokens:check"
-  },
-  "engines": {
-    "node": ">=18.18"
-  },
-  "peerDependencies": {
-    "react": ">=18.2.0 || >=19.0.0",
-    "react-dom": ">=18.2.0 || >=19.0.0",
-    "tailwindcss": "^4.0.0"
-  },
-  "keywords": [
-    "banhaten",
-    "design-system",
-    "react",
-    "shadcn",
-    "rtl",
-    "arabic",
-    "components"
-  ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/AhmadGalal85/Banhaten-design-system.git"
-  },
-  "bugs": {
-    "url": "https://github.com/AhmadGalal85/Banhaten-design-system/issues"
-  },
-  "homepage": "https://github.com/AhmadGalal85/Banhaten-design-system#readme",
-  "main": "index.js",
-  "directories": {
-    "doc": "docs"
-  },
-  "devDependencies": {},
-  "author": ""
-}
+{
+  "name": "banhaten",
+  "version": "0.1.3",
+  "description": "Banhaten design system: an Arabic and English-first React design system with shadcn-style component installation.",
+  "type": "module",
+  "bin": {
+    "banhaten": "src/cli/index.js"
+  },
+  "files": [
+    "src",
+    "registry/index.json",
+    "registry/components",
+    "registry/examples",
+    "registry/hooks",
+    "registry/styles",
+    "registry/utils",
+    "registry/assets/activity-feed-avatar.png",
+    "registry/assets/avatars/avatar-01.jpg",
+    "registry/assets/images/art-01.jpg",
+    "registry.json",
+    "tokens/banhaten.tokens.json",
+    "tokens/Color mode.zip",
+    "tokens/Theme.zip",
+    "tokens/Numbers.zip",
+    "tokens/Radius.zip",
+    "schema",
+    "docs",
+    "banhaten.config.example.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build",
+    "build:railway": "npm --prefix playground ci --include=dev --include=optional && npm --prefix playground run build:railway",
+    "start": "node playground/scripts/serve-static.mjs playground/dist",
+    "check": "node --check src/cli/index.js && node --check scripts/generate-shadcn-registry.mjs && node --check scripts/normalize-component-docs.mjs && npm run cli:test && npm run tokens:check && npm run registry:check && npm run docs:check && npm run playground:test && npm run playground:audit",
+    "cli:test": "node scripts/cli-integration-test.mjs",
+    "playground:build": "npm --prefix playground run build",
+    "playground:dev": "npm --prefix playground run dev",
+    "playground:test": "npm --prefix playground run test",
+    "playground:audit": "npm --prefix playground audit --audit-level=high",
+    "registry:check": "node scripts/check-registry-mirrors.mjs && node scripts/generate-shadcn-registry.mjs --check",
+    "registry:export": "node scripts/generate-shadcn-registry.mjs --write",
+    "registry:sync": "node scripts/check-registry-mirrors.mjs --write",
+    "components:tokens:check": "node scripts/check-component-token-usage.mjs",
+    "docs:check": "node scripts/check-component-docs.mjs && node scripts/normalize-component-docs.mjs",
+    "docs:normalize": "node scripts/normalize-component-docs.mjs --write",
+    "smoke": "node src/cli/index.js list",
+    "tokens:build": "node scripts/generate-token-css.mjs --write",
+    "tokens:check": "node scripts/generate-token-css.mjs --check && node scripts/check-token-contract.mjs && npm run components:tokens:check"
+  },
+  "engines": {
+    "node": ">=18.18"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0 || >=19.0.0",
+    "react-dom": ">=18.2.0 || >=19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "keywords": [
+    "banhaten",
+    "design-system",
+    "react",
+    "shadcn",
+    "rtl",
+    "arabic",
+    "components"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AhmadGalal85/Banhaten-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AhmadGalal85/Banhaten-design-system/issues"
+  },
+  "homepage": "https://github.com/AhmadGalal85/Banhaten-design-system/tree/main/docs",
+  "directories": {
+    "doc": "docs"
+  },
+  "devDependencies": {},
+  "author": "Ahmad Galal"
+}

package/registry/components/alert-dialog.tsx

@@ -0,0 +1,297 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { TriangleAlertIcon } from "lucide-react"
+
+import { Button, type ButtonProps } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+type AlertDialogIntent = "default" | "warning" | "danger"
+type AlertDialogSize = "sm" | "default" | "lg"
+
+const alertDialogContentVariants = cva(
+  [
+    "fixed left-1/2 top-1/2 z-[var(--bh-z-overlay)] flex max-h-[calc(100vh-(var(--bh-space-8xl-48)*2))] w-[var(--bh-alert-dialog-width)]",
+    "max-w-[calc(100vw-(var(--bh-space-4xl-20)*2))] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden",
+    "rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-modal)] outline-none",
+    "[--bh-alert-dialog-border:var(--bh-border-subtle)] [--shadow-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-alert-dialog-border),var(--shadow-component-default)]",
+  ],
+  {
+    variants: {
+      size: {
+        default:
+          "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-12xl-128)+var(--bh-space-8xl-48))]",
+        lg: "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-16xl-256)+var(--bh-space-9xl-64)-var(--bh-space-xs-4))]",
+        sm: "[--bh-alert-dialog-width:calc(var(--bh-space-19xl-384)+var(--bh-space-8xl-48)+var(--bh-space-md-8))]",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+)
+
+const intentClassNames: Record<AlertDialogIntent, string> = {
+  danger:
+    "bg-[var(--bh-bg-danger-subtle)] text-[var(--bh-content-danger-default)]",
+  default:
+    "bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]",
+  warning:
+    "bg-[var(--bh-bg-warning-subtle)] text-[var(--bh-content-warning-default)]",
+}
+
+type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>
+type AlertDialogTriggerProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Trigger
+>
+type AlertDialogPortalProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Portal
+>
+type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Overlay
+>
+type AlertDialogContentProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Content
+> &
+  VariantProps<typeof alertDialogContentVariants> & {
+    overlayClassName?: string
+  }
+type AlertDialogHeaderProps = React.ComponentProps<"header">
+type AlertDialogBodyProps = React.ComponentProps<"div">
+type AlertDialogFooterProps = React.ComponentProps<"footer">
+type AlertDialogTitleProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Title
+>
+type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Description
+>
+type AlertDialogIconProps = React.ComponentProps<"span"> & {
+  intent?: AlertDialogIntent
+}
+type AlertDialogActionProps = ButtonProps
+type AlertDialogCancelProps = ButtonProps
+
+const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  AlertDialogOverlayProps
+>(function AlertDialogOverlay({ className, ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-[var(--bh-z-overlay)] bg-[var(--bh-bg-backdrop)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  AlertDialogContentProps
+>(function AlertDialogContent(
+  { children, className, overlayClassName, size, ...props },
+  ref
+) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay className={overlayClassName} />
+      <AlertDialogPrimitive.Content
+        data-size={size ?? "sm"}
+        data-slot="alert-dialog-content"
+        ref={ref}
+        className={cn(alertDialogContentVariants({ size, className }))}
+        {...props}
+      >
+        {children}
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPortal>
+  )
+})
+
+const AlertDialogHeader = React.forwardRef<HTMLElement, AlertDialogHeaderProps>(
+  function AlertDialogHeader({ className, ...props }, ref) {
+    return (
+      <header
+        data-slot="alert-dialog-header"
+        ref={ref}
+        className={cn(
+          "flex w-full shrink-0 items-start gap-[var(--bh-space-sm-6)] px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-md-8)] pt-[var(--bh-space-4xl-20)] text-start",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const AlertDialogBody = React.forwardRef<HTMLDivElement, AlertDialogBodyProps>(
+  function AlertDialogBody({ className, ...props }, ref) {
+    return (
+      <div
+        data-slot="alert-dialog-body"
+        ref={ref}
+        className={cn(
+          "flex w-full shrink-0 items-start px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-4xl-20)] pt-[var(--bh-space-lg-10)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const AlertDialogFooter = React.forwardRef<
+  HTMLElement,
+  AlertDialogFooterProps
+>(function AlertDialogFooter({ className, ...props }, ref) {
+  return (
+    <footer
+      data-slot="alert-dialog-footer"
+      ref={ref}
+      className={cn(
+        "flex w-full shrink-0 items-center justify-end gap-[var(--bh-space-lg-10)] border-t border-[var(--bh-border-subtle)] px-[var(--bh-space-4xl-20)] py-[var(--bh-space-3xl-16)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  AlertDialogTitleProps
+>(function AlertDialogTitle({ className, dir = "auto", ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "min-w-0 flex-1 text-start text-[length:var(--bh-text-heading-sm-semibold-font-size)] font-[var(--bh-text-heading-sm-semibold-font-weight)] leading-[var(--bh-text-heading-sm-semibold-line-height)] tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)] text-[var(--bh-content-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  AlertDialogDescriptionProps
+>(function AlertDialogDescription({ className, dir = "auto", ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "min-w-0 flex-1 text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+function AlertDialogIcon({
+  children,
+  className,
+  intent = "danger",
+  ...props
+}: AlertDialogIconProps) {
+  return (
+    <span
+      aria-hidden="true"
+      data-intent={intent}
+      data-slot="alert-dialog-icon"
+      className={cn(
+        "inline-flex size-[var(--bh-space-5xl-24)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)]",
+        intentClassNames[intent],
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <TriangleAlertIcon
+          className="size-[var(--bh-space-3xl-16)]"
+          strokeWidth={2}
+        />
+      )}
+    </span>
+  )
+}
+
+const AlertDialogAction = React.forwardRef<
+  HTMLButtonElement,
+  AlertDialogActionProps
+>(function AlertDialogAction(
+  { asChild = false, children = "Confirm", size = "sm", variant = "danger", ...props },
+  ref
+) {
+  return (
+    <AlertDialogPrimitive.Action asChild>
+      <Button asChild={asChild} ref={ref} size={size} variant={variant} {...props}>
+        {children}
+      </Button>
+    </AlertDialogPrimitive.Action>
+  )
+})
+
+const AlertDialogCancel = React.forwardRef<
+  HTMLButtonElement,
+  AlertDialogCancelProps
+>(function AlertDialogCancel(
+  { asChild = false, children = "Cancel", size = "sm", variant = "soft", ...props },
+  ref
+) {
+  return (
+    <AlertDialogPrimitive.Cancel asChild>
+      <Button asChild={asChild} ref={ref} size={size} variant={variant} {...props}>
+        {children}
+      </Button>
+    </AlertDialogPrimitive.Cancel>
+  )
+})
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  alertDialogContentVariants,
+}
+export type {
+  AlertDialogActionProps,
+  AlertDialogBodyProps,
+  AlertDialogCancelProps,
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogFooterProps,
+  AlertDialogHeaderProps,
+  AlertDialogIconProps,
+  AlertDialogIntent,
+  AlertDialogOverlayProps,
+  AlertDialogPortalProps,
+  AlertDialogProps,
+  AlertDialogSize,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+}

package/registry/components/aspect-ratio.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+import { cn } from "@/lib/utils"
+
+type AspectRatioProps = React.ComponentPropsWithoutRef<
+  typeof AspectRatioPrimitive.Root
+>
+
+const AspectRatio = React.forwardRef<
+  React.ElementRef<typeof AspectRatioPrimitive.Root>,
+  AspectRatioProps
+>(function AspectRatio({ className, ...props }, ref) {
+  return (
+    <AspectRatioPrimitive.Root
+      data-slot="aspect-ratio"
+      ref={ref}
+      className={cn(
+        "overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-neutral-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+export { AspectRatio }
+export type { AspectRatioProps }