@devalok/shilp-sutra 0.37.1 → 0.39.0

package/dist/ui/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../src/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\ntype CardSize = 'sm' | 'md' | 'lg'\n\nconst CardSizeContext = React.createContext<CardSize>('md')\n\nconst cardVariants = cva(\n  'rounded-ds-lg text-surface-fg transition-shadow duration-fast-02 ease-productive-standard',\n  {\n    variants: {\n      variant: {\n        default: 'bg-surface-raised border border-surface-border shadow-raised',\n        elevated: 'bg-surface-raised border border-surface-border shadow-raised-hover',\n        outline: 'bg-transparent border border-surface-border-strong shadow-none',\n        flat: 'bg-surface-raised border-none shadow-none',\n      },\n      color: {\n        default: '',\n        accent: 'border-accent-7',\n        error: 'border-error-7',\n        success: 'border-success-7',\n        warning: 'border-warning-7',\n        info: 'border-info-7',\n        neutral: '',\n      },\n      size: {\n        sm: '',\n        md: '',\n        lg: '',\n      },\n    },\n    defaultVariants: { variant: 'default', color: 'default', size: 'md' },\n  },\n)\n\n/**\n * Props for Card — a general-purpose content container with 4 elevation/style variants and\n * an optional interactive hover state.\n *\n * **Variants:** `default` (subtle border + shadow-raised) | `elevated` (stronger shadow-raised-hover) |\n * `outline` (2px solid border, no shadow) | `flat` (filled background, no shadow)\n *\n * **Composition:** Use sub-components `<CardHeader>`, `<CardTitle>`, `<CardDescription>`,\n * `<CardContent>`, and `<CardFooter>` for consistent internal spacing.\n *\n * **Interactive:** Pass `interactive` to enable hover shadow lift and pointer cursor —\n * useful for clickable cards in grids.\n *\n * @example\n * // Standard content card with header and body:\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Project Alpha</CardTitle>\n *     <CardDescription>Last updated 2 hours ago</CardDescription>\n *   </CardHeader>\n *   <CardContent>\n *     <p>Sprint 4 is in progress with 12 open tasks.</p>\n *   </CardContent>\n * </Card>\n *\n * @example\n * // Elevated card for a dashboard stat widget:\n * <Card variant=\"elevated\">\n *   <CardContent>\n *     <StatCard label=\"Revenue\" value=\"$12,400\" delta={{ value: \"+8%\", direction: \"up\" }} />\n *   </CardContent>\n * </Card>\n *\n * @example\n * // Clickable card in a project grid (interactive hover effect):\n * <Card interactive onClick={() => router.push(`/projects/${id}`)}>\n *   <CardHeader>\n *     <CardTitle>{project.name}</CardTitle>\n *   </CardHeader>\n * </Card>\n *\n * @example\n * // Flat card for a sidebar panel section (no shadow):\n * <Card variant=\"flat\" className=\"p-ds-05\">\n *   <p className=\"text-surface-fg-muted text-ds-sm\">No recent activity</p>\n * </Card>\n * // These are just a few ways — feel free to combine props creatively!\n */\nconst accentColorMap: Record<string, string> = {\n  default: 'var(--color-accent-9)',\n  secondary: 'var(--color-secondary-9)',\n  error: 'var(--color-error-9)',\n  success: 'var(--color-success-9)',\n  warning: 'var(--color-warning-9)',\n  info: 'var(--color-info-9)',\n}\n\nexport interface CardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof cardVariants> {\n  interactive?: boolean\n  /** Position of the accent border strip */\n  accent?: 'left' | 'top' | 'right' | 'bottom'\n  /** Semantic color key or any CSS color string for the accent strip. Requires `accent` to be set. @default 'default' */\n  accentColor?: 'default' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | (string & {})\n  /** Width of the accent strip in pixels @default 3 */\n  accentWidth?: 2 | 3 | 4 | 6\n}\n\nexport type { CardSize }\n\nconst accentSizeClasses: Record<string, Record<number, string>> = {\n  left:   { 2: 'w-[2px]', 3: 'w-[3px]', 4: 'w-[4px]', 6: 'w-[6px]' },\n  top:    { 2: 'h-[2px]', 3: 'h-[3px]', 4: 'h-[4px]', 6: 'h-[6px]' },\n  right:  { 2: 'w-[2px]', 3: 'w-[3px]', 4: 'w-[4px]', 6: 'w-[6px]' },\n  bottom: { 2: 'h-[2px]', 3: 'h-[3px]', 4: 'h-[4px]', 6: 'h-[6px]' },\n}\n\nconst accentPositionClasses: Record<string, string> = {\n  left: 'left-0 top-0 bottom-0 rounded-l-ds-lg',\n  top: 'top-0 left-0 right-0 rounded-t-ds-lg',\n  right: 'right-0 top-0 bottom-0 rounded-r-ds-lg',\n  bottom: 'bottom-0 left-0 right-0 rounded-b-ds-lg',\n}\n\nfunction getAccentPositionClasses(position: string, width: number): string {\n  return `${accentPositionClasses[position] ?? ''} ${accentSizeClasses[position]?.[width] ?? ''}`\n}\n\nfunction resolveAccentColor(color: string): string {\n  return accentColorMap[color] ?? color\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, color, size, interactive, accent, accentColor = 'default', accentWidth = 3, children, ...props }, ref) => {\n    const resolvedSize: CardSize = size ?? 'md'\n    const classes = cn(\n      cardVariants({ variant, color, size }),\n      accent && 'relative overflow-hidden',\n      interactive && 'hover:shadow-raised-hover hover:border-surface-border-strong cursor-pointer transition-shadow duration-fast-02 ease-productive-standard',\n      className,\n    )\n\n    const accentEl = accent ? (\n      <motion.span\n        aria-hidden=\"true\"\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        transition={tweens.fade}\n        className={cn('absolute pointer-events-none bg-[var(--card-accent-bg)]', getAccentPositionClasses(accent, accentWidth))}\n        style={{ '--card-accent-bg': resolveAccentColor(accentColor) } as React.CSSProperties}\n      />\n    ) : null\n\n    const content = (\n      <CardSizeContext.Provider value={resolvedSize}>\n        {accentEl}\n        {children}\n      </CardSizeContext.Provider>\n    )\n\n    if (interactive) {\n      return (\n        <motion.div\n          ref={ref}\n          whileHover={{ y: -3 }}\n          whileTap={{ scale: 0.98 }}\n          transition={springs.snappy}\n          className={classes}\n          {...motionProps(props)}\n        >\n          {content}\n        </motion.div>\n      )\n    }\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {content}\n      </div>\n    )\n  },\n)\nCard.displayName = 'Card'\n\nconst headerSizeClasses: Record<CardSize, string> = {\n  sm: 'p-ds-05',\n  md: 'p-ds-06',\n  lg: 'p-ds-07',\n}\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const size = React.useContext(CardSizeContext)\n  return (\n    <div\n      ref={ref}\n      className={cn('flex flex-col space-y-ds-02b', headerSizeClasses[size], className)}\n      {...props}\n    />\n  )\n})\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('font-sans font-semibold leading-ds-none tracking-normal text-surface-fg', className)}\n    {...props}\n  />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-ds-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst contentSizeClasses: Record<CardSize, string> = {\n  sm: 'p-ds-05 pt-0',\n  md: 'p-ds-06 pt-0',\n  lg: 'p-ds-07 pt-0',\n}\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const size = React.useContext(CardSizeContext)\n  return (\n    <div ref={ref} className={cn(contentSizeClasses[size], className)} {...props} />\n  )\n})\nCardContent.displayName = 'CardContent'\n\nconst footerSizeClasses: Record<CardSize, string> = {\n  sm: 'p-ds-05 pt-0',\n  md: 'p-ds-06 pt-0',\n  lg: 'p-ds-07 pt-0',\n}\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const size = React.useContext(CardSizeContext)\n  return (\n    <div\n      ref={ref}\n      className={cn('flex items-center', footerSizeClasses[size], className)}\n      {...props}\n    />\n  )\n})\nCardFooter.displayName = 'CardFooter'\n\nexport { Card, CardContent,CardDescription, CardFooter, CardHeader, CardTitle, cardVariants }\n"],"mappings":"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"}
+{"version":3,"file":"card.js","names":[],"sources":["../../src/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\ntype CardSize = 'sm' | 'md' | 'lg'\n\nconst CardSizeContext = React.createContext<CardSize>('md')\n\nconst cardVariants = cva(\n  'rounded-surface text-surface-fg transition-shadow duration-fast-02 ease-productive-standard',\n  {\n    variants: {\n      variant: {\n        default: 'bg-surface-raised border border-surface-border shadow-raised',\n        elevated: 'bg-surface-raised border border-surface-border shadow-raised-hover',\n        outline: 'bg-transparent border border-surface-border-strong shadow-none',\n        flat: 'bg-surface-raised border-none shadow-none',\n      },\n      color: {\n        default: '',\n        accent: 'border-accent-7',\n        error: 'border-error-7',\n        success: 'border-success-7',\n        warning: 'border-warning-7',\n        info: 'border-info-7',\n        neutral: '',\n      },\n      size: {\n        sm: '',\n        md: '',\n        lg: '',\n      },\n    },\n    defaultVariants: { variant: 'default', color: 'default', size: 'md' },\n  },\n)\n\n/**\n * Props for Card — a general-purpose content container with 4 elevation/style variants and\n * an optional interactive hover state.\n *\n * **Variants:** `default` (subtle border + shadow-raised) | `elevated` (stronger shadow-raised-hover) |\n * `outline` (2px solid border, no shadow) | `flat` (filled background, no shadow)\n *\n * **Composition:** Use sub-components `<CardHeader>`, `<CardTitle>`, `<CardDescription>`,\n * `<CardContent>`, and `<CardFooter>` for consistent internal spacing.\n *\n * **Interactive:** Pass `interactive` to enable hover shadow lift and pointer cursor —\n * useful for clickable cards in grids.\n *\n * @example\n * // Standard content card with header and body:\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Project Alpha</CardTitle>\n *     <CardDescription>Last updated 2 hours ago</CardDescription>\n *   </CardHeader>\n *   <CardContent>\n *     <p>Sprint 4 is in progress with 12 open tasks.</p>\n *   </CardContent>\n * </Card>\n *\n * @example\n * // Elevated card for a dashboard stat widget:\n * <Card variant=\"elevated\">\n *   <CardContent>\n *     <StatCard label=\"Revenue\" value=\"$12,400\" delta={{ value: \"+8%\", direction: \"up\" }} />\n *   </CardContent>\n * </Card>\n *\n * @example\n * // Clickable card in a project grid (interactive hover effect):\n * <Card interactive onClick={() => router.push(`/projects/${id}`)}>\n *   <CardHeader>\n *     <CardTitle>{project.name}</CardTitle>\n *   </CardHeader>\n * </Card>\n *\n * @example\n * // Flat card for a sidebar panel section (no shadow):\n * <Card variant=\"flat\" className=\"p-ds-05\">\n *   <p className=\"text-surface-fg-muted text-ds-sm\">No recent activity</p>\n * </Card>\n * // These are just a few ways — feel free to combine props creatively!\n */\nconst accentColorMap: Record<string, string> = {\n  default: 'var(--color-accent-9)',\n  secondary: 'var(--color-secondary-9)',\n  error: 'var(--color-error-9)',\n  success: 'var(--color-success-9)',\n  warning: 'var(--color-warning-9)',\n  info: 'var(--color-info-9)',\n}\n\nexport interface CardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof cardVariants> {\n  interactive?: boolean\n  /** Position of the accent border strip */\n  accent?: 'left' | 'top' | 'right' | 'bottom'\n  /** Semantic color key or any CSS color string for the accent strip. Requires `accent` to be set. @default 'default' */\n  accentColor?: 'default' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | (string & {})\n  /** Width of the accent strip in pixels @default 3 */\n  accentWidth?: 2 | 3 | 4 | 6\n}\n\nexport type { CardSize }\n\nconst accentSizeClasses: Record<string, Record<number, string>> = {\n  left:   { 2: 'w-[2px]', 3: 'w-[3px]', 4: 'w-[4px]', 6: 'w-[6px]' },\n  top:    { 2: 'h-[2px]', 3: 'h-[3px]', 4: 'h-[4px]', 6: 'h-[6px]' },\n  right:  { 2: 'w-[2px]', 3: 'w-[3px]', 4: 'w-[4px]', 6: 'w-[6px]' },\n  bottom: { 2: 'h-[2px]', 3: 'h-[3px]', 4: 'h-[4px]', 6: 'h-[6px]' },\n}\n\nconst accentPositionClasses: Record<string, string> = {\n  left: 'left-0 top-0 bottom-0 rounded-l-surface',\n  top: 'top-0 left-0 right-0 rounded-t-surface',\n  right: 'right-0 top-0 bottom-0 rounded-r-surface',\n  bottom: 'bottom-0 left-0 right-0 rounded-b-surface',\n}\n\nfunction getAccentPositionClasses(position: string, width: number): string {\n  return `${accentPositionClasses[position] ?? ''} ${accentSizeClasses[position]?.[width] ?? ''}`\n}\n\nfunction resolveAccentColor(color: string): string {\n  return accentColorMap[color] ?? color\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, color, size, interactive, accent, accentColor = 'default', accentWidth = 3, children, ...props }, ref) => {\n    const resolvedSize: CardSize = size ?? 'md'\n    const classes = cn(\n      cardVariants({ variant, color, size }),\n      accent && 'relative overflow-hidden',\n      interactive && 'hover:shadow-raised-hover hover:border-surface-border-strong cursor-pointer transition-shadow duration-fast-02 ease-productive-standard',\n      className,\n    )\n\n    const accentEl = accent ? (\n      <motion.span\n        aria-hidden=\"true\"\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        transition={tweens.fade}\n        className={cn('absolute pointer-events-none bg-[var(--card-accent-bg)]', getAccentPositionClasses(accent, accentWidth))}\n        style={{ '--card-accent-bg': resolveAccentColor(accentColor) } as React.CSSProperties}\n      />\n    ) : null\n\n    const content = (\n      <CardSizeContext.Provider value={resolvedSize}>\n        {accentEl}\n        {children}\n      </CardSizeContext.Provider>\n    )\n\n    if (interactive) {\n      return (\n        <motion.div\n          ref={ref}\n          whileHover={{ y: -3 }}\n          whileTap={{ scale: 0.98 }}\n          transition={springs.snappy}\n          className={classes}\n          {...motionProps(props)}\n        >\n          {content}\n        </motion.div>\n      )\n    }\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {content}\n      </div>\n    )\n  },\n)\nCard.displayName = 'Card'\n\nconst headerSizeClasses: Record<CardSize, string> = {\n  sm: 'p-ds-05',\n  md: 'p-ds-06',\n  lg: 'p-ds-07',\n}\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const size = React.useContext(CardSizeContext)\n  return (\n    <div\n      ref={ref}\n      className={cn('flex flex-col space-y-ds-02b', headerSizeClasses[size], className)}\n      {...props}\n    />\n  )\n})\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('font-sans font-semibold leading-ds-none tracking-normal text-surface-fg', className)}\n    {...props}\n  />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-ds-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst contentSizeClasses: Record<CardSize, string> = {\n  sm: 'p-ds-05 pt-0',\n  md: 'p-ds-06 pt-0',\n  lg: 'p-ds-07 pt-0',\n}\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const size = React.useContext(CardSizeContext)\n  return (\n    <div ref={ref} className={cn(contentSizeClasses[size], className)} {...props} />\n  )\n})\nCardContent.displayName = 'CardContent'\n\nconst footerSizeClasses: Record<CardSize, string> = {\n  sm: 'p-ds-05 pt-0',\n  md: 'p-ds-06 pt-0',\n  lg: 'p-ds-07 pt-0',\n}\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const size = React.useContext(CardSizeContext)\n  return (\n    <div\n      ref={ref}\n      className={cn('flex items-center', footerSizeClasses[size], className)}\n      {...props}\n    />\n  )\n})\nCardFooter.displayName = 'CardFooter'\n\nexport { Card, CardContent,CardDescription, CardFooter, CardHeader, CardTitle, cardVariants }\n"],"mappings":"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"}

package/dist/ui/charts/index.js

@@ -17,7 +17,7 @@ function M({ items: e, position: t = "bottom", className: r }) {
 		children: e.map((e) => /* @__PURE__ */ d("div", {
 			className: "flex items-center gap-ds-02",
 			children: [/* @__PURE__ */ u("span", {
-				className: "inline-block h-3 w-3 shrink-0 rounded-ds-sm",
+				className: "inline-block h-3 w-3 shrink-0 rounded-control-inner",
 				style: { backgroundColor: e.color }
 			}), /* @__PURE__ */ u("span", { children: e.label })]
 		}, e.label))
@@ -121,7 +121,7 @@ z.displayName = "GridLines";
 //#region src/ui/charts/_internal/tooltip.tsx
 function B({ state: e, className: t }) {
 	return e.visible ? /* @__PURE__ */ u("div", {
-		className: n("pointer-events-none absolute z-tooltip", "rounded-ds-md border border-surface-border-strong", "bg-surface-overlay px-ds-03 py-ds-02", "shadow-raised-hover", "text-ds-sm text-surface-fg", t),
+		className: n("pointer-events-none absolute z-tooltip", "rounded-overlay-sm border border-surface-border-strong", "bg-surface-overlay px-ds-03 py-ds-02", "shadow-raised-hover", "text-ds-sm text-surface-fg", t),
 		style: {
 			left: e.x + 12,
 			top: e.y - 12
@@ -250,7 +250,7 @@ var W = i.forwardRef(({ data: r, xKey: a, series: o, curved: s = !1, stacked: c
 									className: "flex items-center gap-ds-02",
 									children: [
 										/* @__PURE__ */ u("span", {
-											className: "inline-block h-2 w-2 rounded-ds-full",
+											className: "inline-block h-2 w-2 rounded-pill",
 											style: { backgroundColor: Y[t] }
 										}),
 										/* @__PURE__ */ d("span", {
@@ -604,7 +604,7 @@ var J = i.forwardRef(({ data: r, xKey: i, series: a, curved: o = !1, showDots: s
 								className: "flex items-center gap-ds-02",
 								children: [
 									/* @__PURE__ */ u("span", {
-										className: "inline-block h-2 w-2 rounded-ds-full",
+										className: "inline-block h-2 w-2 rounded-pill",
 										style: { backgroundColor: H[t] }
 									}),
 									/* @__PURE__ */ d("span", {
@@ -894,7 +894,7 @@ var X = i.forwardRef(({ data: r, axes: i, series: a, maxValue: p, levels: m = 5,
 										className: "flex items-center gap-ds-02",
 										children: [
 											/* @__PURE__ */ u("span", {
-												className: "inline-block h-2 w-2 rounded-ds-full",
+												className: "inline-block h-2 w-2 rounded-pill",
 												style: { backgroundColor: z[n] }
 											}),
 											/* @__PURE__ */ d("span", {