@jcsoftdev/ui 0.1.6 → 0.2.0

package/src/forms/rating/rating.tsx

@@ -1,10 +1,13 @@
 "use client";
 
-import { Star } from "lucide-react";
 import { type KeyboardEvent, type PointerEvent, useState } from "react";
+import { Star } from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import { ratingFromPointer, ratingKey, roundRating, starFill } from "./model.js";
 
+export type RatingPart = "root" | "stars" | "star" | "icon" | "fill" | "value";
+
 export interface RatingProps {
   value?: number;
   defaultValue?: number;
@@ -19,6 +22,8 @@ export interface RatingProps {
   showValue?: boolean;
   "aria-label"?: string;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<RatingPart>;
 }
 
 const sizes = { sm: "size-4", md: "size-5", lg: "size-7" } as const;
@@ -38,6 +43,7 @@ export function Rating({
   size = "md",
   showValue,
   className,
+  classNames,
   ...aria
 }: RatingProps) {
   const [inner, setInner] = useState(defaultValue);
@@ -75,7 +81,11 @@ export function Rating({
       <span
         // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length list
         key={index}
-        className={cn("relative inline-flex", interactive && "pressable cursor-pointer")}
+        className={cn(
+          "relative inline-flex",
+          interactive && "pressable cursor-pointer",
+          classNames?.star,
+        )}
         onPointerMove={interactive ? (event) => setHover(pointerValue(event, index)) : undefined}
         onPointerUp={
           interactive
@@ -87,13 +97,16 @@ export function Rating({
             : undefined
         }
       >
-        <Star aria-hidden="true" className={cn(sizes[size], "text-line-strong")} />
+        <Star
+          aria-hidden="true"
+          className={cn(sizes[size], "text-line-strong", classNames?.icon)}
+        />
         <span
           aria-hidden="true"
-          className="absolute inset-y-0 left-0 overflow-hidden"
+          className={cn("absolute inset-y-0 left-0 overflow-hidden", classNames?.fill)}
           style={{ width: `${fill * 100}%` }}
         >
-          <Star className={cn(sizes[size], "fill-warning text-warning")} />
+          <Star className={cn(sizes[size], "fill-warning text-warning", classNames?.icon)} />
         </span>
       </span>
     );
@@ -105,6 +118,7 @@ export function Rating({
     <div
       className={cn(
         "@container/rating inline-flex max-w-full items-center gap-density-sm",
+        classNames?.root,
         className,
       )}
     >
@@ -119,7 +133,10 @@ export function Rating({
           aria-valuetext={text}
           onKeyDown={onKeyDown}
           onPointerLeave={() => setHover(null)}
-          className="inline-flex gap-0.5 rounded-chip outline-none focus-visible:focus-ring"
+          className={cn(
+            "inline-flex gap-0.5 rounded-chip outline-none focus-visible:focus-ring",
+            classNames?.stars,
+          )}
         >
           {stars}
         </div>
@@ -128,12 +145,14 @@ export function Rating({
           role="img"
           aria-label={`${label}: ${text}`}
           aria-disabled={disabled || undefined}
-          className={cn("inline-flex gap-0.5", disabled && "opacity-50")}
+          className={cn("inline-flex gap-0.5", disabled && "opacity-50", classNames?.stars)}
         >
           {stars}
         </div>
       )}
-      {showValue ? <span className="text-ink-2 text-meta tabular-nums">{value}</span> : null}
+      {showValue ? (
+        <span className={cn("text-ink-2 text-meta tabular-nums", classNames?.value)}>{value}</span>
+      ) : null}
     </div>
   );
 }

package/src/forms/select/select.tsx

@@ -1,5 +1,5 @@
-import { ChevronDown } from "lucide-react";
 import type { ComponentPropsWithoutRef } from "react";
+import { ChevronDown } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 
 export interface SelectProps extends ComponentPropsWithoutRef<"select"> {}

package/src/forms/slider/index.ts

@@ -13,5 +13,6 @@ export {
   type SingleSliderProps,
   Slider,
   type SliderMark,
+  type SliderPart,
   type SliderProps,
 } from "./slider.js";

package/src/forms/slider/slider.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { type KeyboardEvent, type PointerEvent, useCallback, useRef, useState } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import {
   clampValue,
@@ -18,6 +19,16 @@ export interface SliderMark {
   label?: string;
 }
 
+export type SliderPart =
+  | "root"
+  | "track"
+  | "range"
+  | "rail"
+  | "thumb"
+  | "value"
+  | "mark"
+  | "markLabel";
+
 interface SliderBaseProps {
   min?: number;
   max?: number;
@@ -38,6 +49,8 @@ interface SliderBaseProps {
   /** Form field name; a range submits `${name}-min` and `${name}-max`. */
   name?: string;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<SliderPart>;
 }
 
 export interface SingleSliderProps extends SliderBaseProps {
@@ -71,6 +84,7 @@ export function Slider(props: SliderProps) {
     formatValue = String,
     name,
     className,
+    classNames,
   } = props;
   const seed = props.value ?? props.defaultValue;
   const range = Array.isArray(seed);
@@ -169,12 +183,18 @@ export function Slider(props: SliderProps) {
           if (dragging.current === null) setActive(null);
         }}
         style={{ left: `${ratioOf(current[index], min, max) * 100}%` }}
-        className="group/thumb -translate-x-1/2 -translate-y-1/2 absolute top-1/2 size-5 touch-none rounded-pill border-control bg-surface-control shadow-control outline-none focus-visible:focus-ring data-[active=true]:shadow-selected"
+        className={cn(
+          "group/thumb -translate-x-1/2 -translate-y-1/2 absolute top-1/2 size-5 touch-none rounded-pill border-control bg-surface-control shadow-control outline-none focus-visible:focus-ring data-[active=true]:shadow-selected",
+          classNames?.thumb,
+        )}
       >
         {showValue ? (
           <span
             aria-hidden="true"
-            className="-translate-x-1/2 pointer-events-none absolute bottom-full left-1/2 mb-1.5 whitespace-nowrap rounded-badge bg-surface-sunken px-1.5 py-0.5 text-chip-text text-ink-2 tabular-nums group-data-[active=true]/thumb:bg-ink group-data-[active=true]/thumb:text-surface"
+            className={cn(
+              "-translate-x-1/2 pointer-events-none absolute bottom-full left-1/2 mb-1.5 whitespace-nowrap rounded-badge bg-surface-sunken px-1.5 py-0.5 text-chip-text text-ink-2 tabular-nums group-data-[active=true]/thumb:bg-ink group-data-[active=true]/thumb:text-surface",
+              classNames?.value,
+            )}
           >
             {formatValue(current[index])}
           </span>
@@ -190,6 +210,7 @@ export function Slider(props: SliderProps) {
         showValue && "pt-8",
         marks?.some((m) => m.label) && "pb-7",
         disabled && "opacity-50",
+        classNames?.root,
         className,
       )}
     >
@@ -198,15 +219,24 @@ export function Slider(props: SliderProps) {
         className={cn(
           "relative h-5 w-full touch-none select-none",
           disabled ? "cursor-not-allowed" : "cursor-pointer",
+          classNames?.track,
         )}
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
         onPointerUp={endDrag}
         onPointerCancel={endDrag}
       >
-        <div className="-translate-y-1/2 absolute inset-x-0 top-1/2 h-1.5 rounded-pill bg-line-strong" />
         <div
-          className="-translate-y-1/2 absolute top-1/2 h-1.5 rounded-pill bg-accent"
+          className={cn(
+            "-translate-y-1/2 absolute inset-x-0 top-1/2 h-1.5 rounded-pill bg-line-strong",
+            classNames?.rail,
+          )}
+        />
+        <div
+          className={cn(
+            "-translate-y-1/2 absolute top-1/2 h-1.5 rounded-pill bg-accent",
+            classNames?.range,
+          )}
           style={{ left: `${start * 100}%`, width: `${(end - start) * 100}%` }}
         />
         {marks?.map((mark) => (
@@ -216,9 +246,19 @@ export function Slider(props: SliderProps) {
             className="absolute top-1/2"
             style={{ left: `${ratioOf(mark.value, min, max) * 100}%` }}
           >
-            <span className="-translate-x-1/2 -translate-y-1/2 absolute size-1 rounded-pill bg-surface" />
+            <span
+              className={cn(
+                "-translate-x-1/2 -translate-y-1/2 absolute size-1 rounded-pill bg-surface",
+                classNames?.mark,
+              )}
+            />
             {mark.label ? (
-              <span className="-translate-x-1/2 absolute top-3.5 whitespace-nowrap text-ink-3 text-meta">
+              <span
+                className={cn(
+                  "-translate-x-1/2 absolute top-3.5 whitespace-nowrap text-ink-3 text-meta",
+                  classNames?.markLabel,
+                )}
+              >
                 {mark.label}
               </span>
             ) : null}

package/src/i18n/strings.ts

@@ -10,6 +10,7 @@ export interface UiStrings {
   actionFailed: string;
   somethingWrong: string;
   actions: string;
+  notifications: string;
 }
 
 export type UiLocale = "en" | "es";
@@ -27,6 +28,7 @@ export const uiStrings = {
     actionFailed: "The action could not be completed. Try again.",
     somethingWrong: "Something went wrong. Try again.",
     actions: "Actions",
+    notifications: "Notifications",
   },
   es: {
     retry: "Reintentar",
@@ -40,5 +42,6 @@ export const uiStrings = {
     actionFailed: "No se pudo completar la acción. Inténtalo de nuevo.",
     somethingWrong: "Algo salió mal. Inténtalo de nuevo.",
     actions: "Acciones",
+    notifications: "Notificaciones",
   },
 } as const satisfies Record<UiLocale, UiStrings>;

package/src/icons/alert-triangle.tsx

@@ -0,0 +1,3 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Alias of TriangleAlert
+export { TriangleAlert as AlertTriangle } from "./triangle-alert.js";

package/src/icons/archive.tsx

@@ -0,0 +1,13 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/archive.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function Archive(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <rect width="20" height="5" x="2" y="3" rx="1" />
+      <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
+      <path d="M10 12h4" />
+    </IconBase>
+  );
+}

package/src/icons/armchair.tsx

@@ -0,0 +1,14 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/armchair.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function Armchair(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3" />
+      <path d="M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z" />
+      <path d="M5 18v2" />
+      <path d="M19 18v2" />
+    </IconBase>
+  );
+}

package/src/icons/arrow-down-right.tsx

@@ -0,0 +1,12 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/arrow-down-right.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function ArrowDownRight(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="m7 7 10 10" />
+      <path d="M17 7v10H7" />
+    </IconBase>
+  );
+}

package/src/icons/arrow-down-to-line.tsx

@@ -0,0 +1,13 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/arrow-down-to-line.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function ArrowDownToLine(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M12 17V3" />
+      <path d="m6 11 6 6 6-6" />
+      <path d="M19 21H5" />
+    </IconBase>
+  );
+}

package/src/icons/arrow-down.tsx

@@ -0,0 +1,12 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/arrow-down.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function ArrowDown(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M12 5v14" />
+      <path d="m19 12-7 7-7-7" />
+    </IconBase>
+  );
+}

package/src/icons/arrow-left-to-line.tsx

@@ -0,0 +1,13 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/arrow-left-to-line.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function ArrowLeftToLine(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M3 19V5" />
+      <path d="m13 6-6 6 6 6" />
+      <path d="M7 12h14" />
+    </IconBase>
+  );
+}

package/src/icons/arrow-left.tsx

@@ -0,0 +1,12 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/arrow-left.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function ArrowLeft(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="m12 19-7-7 7-7" />
+      <path d="M19 12H5" />
+    </IconBase>
+  );
+}

package/src/icons/arrow-right-to-line.tsx

@@ -0,0 +1,13 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/arrow-right-to-line.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function ArrowRightToLine(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M17 12H3" />
+      <path d="m11 18 6-6-6-6" />
+      <path d="M21 5v14" />
+    </IconBase>
+  );
+}

package/src/icons/arrow-right.tsx

@@ -0,0 +1,12 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/arrow-right.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function ArrowRight(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M5 12h14" />
+      <path d="m12 5 7 7-7 7" />
+    </IconBase>
+  );
+}

package/src/icons/arrow-up-from-line.tsx

@@ -0,0 +1,13 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/arrow-up-from-line.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function ArrowUpFromLine(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="m18 9-6-6-6 6" />
+      <path d="M12 3v14" />
+      <path d="M5 21h14" />
+    </IconBase>
+  );
+}

package/src/icons/arrow-up-right.tsx

@@ -0,0 +1,12 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/arrow-up-right.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function ArrowUpRight(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M7 7h10v10" />
+      <path d="M7 17 17 7" />
+    </IconBase>
+  );
+}

package/src/icons/arrow-up-to-line.tsx

@@ -0,0 +1,13 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/arrow-up-to-line.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function ArrowUpToLine(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M5 3h14" />
+      <path d="m18 13-6-6-6 6" />
+      <path d="M12 7v14" />
+    </IconBase>
+  );
+}

package/src/icons/arrow-up.tsx

@@ -0,0 +1,12 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/arrow-up.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function ArrowUp(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="m5 12 7-7 7 7" />
+      <path d="M12 19V5" />
+    </IconBase>
+  );
+}

package/src/icons/banknote.tsx

@@ -0,0 +1,13 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/banknote.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function Banknote(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <rect width="20" height="12" x="2" y="6" rx="2" />
+      <circle cx="12" cy="12" r="2" />
+      <path d="M6 12h.01M18 12h.01" />
+    </IconBase>
+  );
+}

package/src/icons/bar-chart2.tsx

@@ -0,0 +1,3 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Alias of ChartNoAxesColumn
+export { ChartNoAxesColumn as BarChart2 } from "./chart-no-axes-column.js";

package/src/icons/bar-chart3.tsx

@@ -0,0 +1,3 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Alias of ChartColumn
+export { ChartColumn as BarChart3 } from "./chart-column.js";

package/src/icons/bell.tsx

@@ -0,0 +1,12 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/bell.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function Bell(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M10.268 21a2 2 0 0 0 3.464 0" />
+      <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
+    </IconBase>
+  );
+}

package/src/icons/bold.tsx

@@ -0,0 +1,11 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/bold.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function Bold(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" />
+    </IconBase>
+  );
+}

package/src/icons/book-open.tsx

@@ -0,0 +1,12 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/book-open.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function BookOpen(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M12 5v16" />
+      <path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z" />
+    </IconBase>
+  );
+}

package/src/icons/boxes.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/boxes.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function Boxes(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" />
+      <path d="m7 16.5-4.74-2.85" />
+      <path d="m7 16.5 5-3" />
+      <path d="M7 16.5v5.17" />
+      <path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" />
+      <path d="m17 16.5-5-3" />
+      <path d="m17 16.5 4.74-2.85" />
+      <path d="M17 16.5v5.17" />
+      <path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" />
+      <path d="M12 8 7.26 5.15" />
+      <path d="m12 8 4.74-2.85" />
+      <path d="M12 13.5V8" />
+    </IconBase>
+  );
+}

package/src/icons/brain.tsx

@@ -0,0 +1,18 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/brain.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function Brain(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M12 18V5" />
+      <path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4" />
+      <path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5" />
+      <path d="M17.997 5.125a4 4 0 0 1 2.526 5.77" />
+      <path d="M18 18a4 4 0 0 0 2-7.464" />
+      <path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" />
+      <path d="M6 18a4 4 0 0 1-2-7.464" />
+      <path d="M6.003 5.125a4 4 0 0 0-2.526 5.77" />
+    </IconBase>
+  );
+}

package/src/icons/calculator.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/calculator.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function Calculator(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <rect width="16" height="20" x="4" y="2" rx="2" />
+      <line x1="8" x2="16" y1="6" y2="6" />
+      <line x1="16" x2="16" y1="14" y2="18" />
+      <path d="M16 10h.01" />
+      <path d="M12 10h.01" />
+      <path d="M8 10h.01" />
+      <path d="M12 14h.01" />
+      <path d="M8 14h.01" />
+      <path d="M12 18h.01" />
+      <path d="M8 18h.01" />
+    </IconBase>
+  );
+}

package/src/icons/calendar-check.tsx

@@ -0,0 +1,15 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/calendar-check.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function CalendarCheck(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M8 2v3" />
+      <path d="M16 2v3" />
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M3 9h18" />
+      <path d="m9 15 2 2 4-4" />
+    </IconBase>
+  );
+}

package/src/icons/calendar-clock.tsx

@@ -0,0 +1,16 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/calendar-clock.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function CalendarClock(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M16 14v2.2l1.6 1" />
+      <path d="M16 2v3" />
+      <path d="M21 7.338V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2.338" />
+      <path d="M3 9h5.859" />
+      <path d="M8 2v3" />
+      <circle cx="16" cy="16" r="6" />
+    </IconBase>
+  );
+}

package/src/icons/calendar-days.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/calendar-days.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function CalendarDays(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M8 2v3" />
+      <path d="M16 2v3" />
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M3 9h18" />
+      <path d="M8 13h.01" />
+      <path d="M12 13h.01" />
+      <path d="M16 13h.01" />
+      <path d="M8 17h.01" />
+      <path d="M12 17h.01" />
+      <path d="M16 17h.01" />
+    </IconBase>
+  );
+}

package/src/icons/calendar-plus.tsx

@@ -0,0 +1,16 @@
+// Generated by scripts/build-icons.mjs. Do not edit.
+// Source: icons/svg/calendar-plus.svg
+import { IconBase, type IconProps } from "./icon-base.js";
+
+export function CalendarPlus(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <path d="M16 18h6" />
+      <path d="M16 2v3" />
+      <path d="M19 15v6" />
+      <path d="M21 11.5V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h8.3" />
+      <path d="M3 9h18" />
+      <path d="M8 2v3" />
+    </IconBase>
+  );
+}