@sia-ui/cli 0.1.0

package/dist/registry/package/components/Button/styles.css

@@ -0,0 +1,111 @@
+/* Bouton
+   ==========================================================================
+   La version précédente déclarait une transition sur trois propriétés puis
+   n'écrivait aucune règle `:hover` ni `:active` : il n'y avait rien à animer.
+   C'est ce qui donnait l'impression de composants plats. */
+
+.sia-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.5rem;
+  padding: 0 1rem;
+  border: 1px solid transparent;
+  border-radius: var(--sia-radius);
+  font: inherit;
+  line-height: 1.25;
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+
+  /* Chaque ton fixe sa couleur une fois; les variantes s'y réfèrent. */
+  --sia-button-accent: var(--sia-primary);
+  --sia-button-on-accent: var(--sia-primary-foreground);
+
+  transition:
+    transform var(--sia-duration-fast) var(--sia-easing-standard),
+    box-shadow var(--sia-duration-base) var(--sia-easing-standard),
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    border-color var(--sia-duration-fast) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+/* Tons ---------------------------------------------------------------- */
+
+.sia-button--primary { --sia-button-accent: var(--sia-primary); }
+.sia-button--neutral { --sia-button-accent: var(--sia-foreground); --sia-button-on-accent: var(--sia-background); }
+.sia-button--info { --sia-button-accent: var(--sia-info); }
+.sia-button--success { --sia-button-accent: var(--sia-success); }
+.sia-button--warning { --sia-button-accent: var(--sia-warning); }
+.sia-button--danger { --sia-button-accent: var(--sia-danger); }
+
+/* Variantes ----------------------------------------------------------- */
+
+.sia-button--solid {
+  color: var(--sia-button-on-accent);
+  /* Un dégradé d'un seul degré : la surface cesse d'être un aplat mort sans
+     pour autant attirer l'œil. */
+  background-image: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--sia-button-accent) 92%, #fff) 0%,
+    var(--sia-button-accent) 100%
+  );
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--sia-button-accent) 20%, transparent);
+}
+
+.sia-button--outline {
+  color: var(--sia-foreground);
+  background: var(--sia-background);
+  border-color: var(--sia-border-strong);
+  box-shadow: var(--sia-elevation-rest);
+}
+
+.sia-button--ghost {
+  color: var(--sia-button-accent);
+  background: transparent;
+}
+
+/* États ---------------------------------------------------------------- */
+
+.sia-button:hover:not(:disabled) {
+  /* Un pixel. Assez pour que le bouton réponde, trop peu pour déplacer la
+     mise en page autour de lui. */
+  transform: translateY(-1px);
+}
+
+.sia-button--solid:hover:not(:disabled) {
+  filter: brightness(1.03);
+  box-shadow: 0 2px 6px color-mix(in srgb, var(--sia-button-accent) 22%, transparent);
+}
+
+.sia-button--outline:hover:not(:disabled) {
+  border-color: var(--sia-button-accent);
+  color: var(--sia-button-accent);
+  background: color-mix(in srgb, var(--sia-button-accent) 5%, var(--sia-background));
+}
+
+.sia-button--ghost:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--sia-button-accent) 10%, transparent);
+}
+
+.sia-button:active:not(:disabled) {
+  transform: translateY(0) scale(0.985);
+  box-shadow: var(--sia-elevation-press);
+  transition-duration: var(--sia-duration-instant);
+}
+
+.sia-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  box-shadow: none;
+}
+
+.sia-button[aria-busy="true"] {
+  cursor: progress;
+}
+
+/* Tailles -------------------------------------------------------------- */
+
+.sia-button--sm { min-height: 2rem; padding: 0 0.75rem; font-size: 0.875rem; }
+.sia-button--lg { min-height: 3rem; padding: 0 1.25rem; }

package/dist/registry/package/components/Calendar/index.tsx

@@ -0,0 +1,192 @@
+import { useMemo, useState, type ReactNode } from "react";
+import { cn, toneClass } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import { ChevronLeftIcon, ChevronRightIcon } from "../Icons";
+
+export interface CalendarDay {
+  date: string;
+  day: number;
+  inCurrentMonth: boolean;
+  isToday: boolean;
+  disabled: boolean;
+  selected: boolean;
+  inRange: boolean;
+  rangeEdge?: "start" | "end";
+}
+export interface CalendarRangeValue { start: string; end: string; }
+export type CalendarMode = "month" | "year";
+export interface CalendarProps {
+  value?: string;
+  defaultValue?: string;
+  range?: CalendarRangeValue;
+  defaultRange?: CalendarRangeValue;
+  selectionMode?: "single" | "range";
+  month?: string;
+  defaultMonth?: string;
+  mode?: CalendarMode;
+  defaultMode?: CalendarMode;
+  onValueChange?: (value: string) => void;
+  onRangeChange?: (value: CalendarRangeValue) => void;
+  onSelect?: (value: string, source: "date" | "month" | "year") => void;
+  onMonthChange?: (month: string) => void;
+  onPanelChange?: (month: string, mode: CalendarMode) => void;
+  disabledDate?: (date: string) => boolean;
+  validRange?: [string, string];
+  renderDay?: (day: CalendarDay) => ReactNode;
+  cellRender?: (day: CalendarDay, originNode: ReactNode) => ReactNode;
+  headerRender?: (props: { month: string; mode: CalendarMode; onMonthChange: (month: string) => void; onModeChange: (mode: CalendarMode) => void }) => ReactNode;
+  renderExtraFooter?: () => ReactNode;
+  locale?: string;
+  firstDayOfWeek?: 0 | 1;
+  showWeek?: boolean;
+  fullscreen?: boolean;
+  tone?: ComponentTone;
+  className?: string;
+}
+const pad = (value: number) => String(value).padStart(2, "0");
+const iso = (date: Date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+const monthIso = (date: Date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}`;
+const parseMonth = (value?: string) => {
+  const source = value ? new Date(`${value.slice(0, 7)}-01T12:00:00`) : new Date();
+  return Number.isNaN(source.getTime()) ? new Date() : source;
+};
+function weekNumber(value: string) {
+  const date = new Date(`${value}T12:00:00`);
+  const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const day = target.getUTCDay() || 7;
+  target.setUTCDate(target.getUTCDate() + 4 - day);
+  const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1));
+  return Math.ceil((((target.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+}
+
+export function Calendar({
+  value,
+  defaultValue,
+  range,
+  defaultRange = { start: "", end: "" },
+  selectionMode = "single",
+  month,
+  defaultMonth,
+  mode,
+  defaultMode = "month",
+  onValueChange,
+  onRangeChange,
+  onSelect,
+  onMonthChange,
+  onPanelChange,
+  disabledDate,
+  validRange,
+  renderDay,
+  cellRender,
+  headerRender,
+  renderExtraFooter,
+  locale = "fr-FR",
+  firstDayOfWeek = 1,
+  showWeek = false,
+  fullscreen = false,
+  tone = "primary",
+  className,
+}: CalendarProps) {
+  const [selected, setSelected] = useState(defaultValue ?? "");
+  const [selectedRange, setSelectedRange] = useState(defaultRange);
+  const [view, setView] = useState(() => parseMonth(month ?? defaultMonth ?? value ?? defaultValue));
+  const [panelMode, setPanelMode] = useState(defaultMode);
+  const currentValue = value ?? selected;
+  const currentRange = range ?? selectedRange;
+  const currentMode = mode ?? panelMode;
+  const controlledMonth = month ? parseMonth(month) : view;
+  const year = controlledMonth.getFullYear();
+  const monthIndex = controlledMonth.getMonth();
+  const setMonth = (next: Date, sourceMode = currentMode) => {
+    if (!month) setView(next);
+    const nextMonth = monthIso(next);
+    onMonthChange?.(nextMonth);
+    onPanelChange?.(nextMonth, sourceMode);
+  };
+  const changeMonth = (offset: number) => setMonth(new Date(year, monthIndex + offset, 1, 12));
+  const changeMode = (next: CalendarMode) => {
+    if (mode === undefined) setPanelMode(next);
+    onPanelChange?.(monthIso(controlledMonth), next);
+  };
+  const isDisabled = (date: string) => Boolean(
+    disabledDate?.(date) ||
+    (validRange && (date < validRange[0] || date > validRange[1])),
+  );
+  const selectDate = (date: string) => {
+    if (isDisabled(date)) return;
+    if (selectionMode === "range") {
+      const next = !currentRange.start || currentRange.end
+        ? { start: date, end: "" }
+        : date < currentRange.start
+          ? { start: date, end: currentRange.start }
+          : { start: currentRange.start, end: date };
+      if (range === undefined) setSelectedRange(next);
+      onRangeChange?.(next);
+    } else {
+      if (value === undefined) setSelected(date);
+      onValueChange?.(date);
+    }
+    onSelect?.(date, "date");
+  };
+  const days = useMemo(() => {
+    const first = new Date(year, monthIndex, 1, 12);
+    const offset = (first.getDay() - firstDayOfWeek + 7) % 7;
+    const start = new Date(year, monthIndex, 1 - offset, 12);
+    const today = iso(new Date());
+    return Array.from({ length: 42 }, (_, index): CalendarDay => {
+      const date = new Date(start);
+      date.setDate(start.getDate() + index);
+      const dateString = iso(date);
+      const rangeEdge = currentRange.start === dateString ? "start" : currentRange.end === dateString ? "end" : undefined;
+      return {
+        date: dateString,
+        day: date.getDate(),
+        inCurrentMonth: date.getMonth() === monthIndex,
+        isToday: dateString === today,
+        disabled: isDisabled(dateString),
+        selected: currentValue === dateString || Boolean(rangeEdge),
+        inRange: Boolean(currentRange.start && currentRange.end && dateString >= currentRange.start && dateString <= currentRange.end),
+        ...(rangeEdge ? { rangeEdge } : {}),
+      };
+    });
+  }, [year, monthIndex, firstDayOfWeek, disabledDate, validRange, currentValue, currentRange.start, currentRange.end]);
+  const weekdays = Array.from({ length: 7 }, (_, index) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(new Date(2024, 0, 7 + firstDayOfWeek + index)));
+  const monthName = new Intl.DateTimeFormat(locale, { month: "long" }).format(controlledMonth);
+  const updateFromString = (next: string) => setMonth(parseMonth(next));
+
+  return (
+    <section className={cn("sia-calendar", `sia-calendar--${currentMode}`, fullscreen && "sia-calendar--fullscreen", toneClass("sia-tone", tone), className)}>
+      {headerRender?.({ month: monthIso(controlledMonth), mode: currentMode, onMonthChange: updateFromString, onModeChange: changeMode }) ?? (
+        <header className="sia-calendar__header">
+          <button type="button" className="sia-calendar__nav" aria-label={currentMode === "month" ? "Mois précédent" : "Année précédente"} onClick={() => currentMode === "month" ? changeMonth(-1) : setMonth(new Date(year - 1, monthIndex, 1, 12))}><ChevronLeftIcon /></button>
+          <div className="sia-calendar__heading">
+            <button type="button" onClick={() => changeMode(currentMode === "month" ? "year" : "month")}>{currentMode === "month" ? monthName : year}</button>
+            {currentMode === "month" && <button type="button" onClick={() => changeMode("year")}>{year}</button>}
+          </div>
+          <button type="button" className="sia-calendar__nav" aria-label={currentMode === "month" ? "Mois suivant" : "Année suivante"} onClick={() => currentMode === "month" ? changeMonth(1) : setMonth(new Date(year + 1, monthIndex, 1, 12))}><ChevronRightIcon /></button>
+        </header>
+      )}
+      {currentMode === "year" ? (
+        <div className="sia-calendar__months">
+          {Array.from({ length: 12 }, (_, index) => {
+            const date = new Date(year, index, 1, 12);
+            return <button type="button" key={index} data-selected={index === monthIndex || undefined} onClick={() => { setMonth(date, "month"); changeMode("month"); onSelect?.(monthIso(date), "month"); }}>{new Intl.DateTimeFormat(locale, { month: "short" }).format(date)}</button>;
+          })}
+        </div>
+      ) : (
+        <>
+          <div className={cn("sia-calendar__weekdays", showWeek && "sia-calendar__with-week")}>
+            {weekdays.map((day) => <span key={day}>{day}</span>)}
+          </div>
+          <div className={cn("sia-calendar__grid", showWeek && "sia-calendar__with-week")}>
+            {days.map((day, index) => {
+              const originNode = <button type="button" disabled={day.disabled} aria-label={day.date} aria-pressed={day.selected} onClick={() => selectDate(day.date)}>{day.day}</button>;
+              return <div className="sia-calendar__cell" key={day.date} data-outside={!day.inCurrentMonth || undefined} data-today={day.isToday || undefined} data-in-range={day.inRange || undefined} data-range-edge={day.rangeEdge}>{showWeek && index % 7 === 0 && <span className="sia-calendar__week-number">{weekNumber(day.date)}</span>}{cellRender?.(day, originNode) ?? originNode}{renderDay?.(day)}</div>;
+            })}
+          </div>
+        </>
+      )}
+      {renderExtraFooter && <footer className="sia-calendar__footer">{renderExtraFooter()}</footer>}
+    </section>
+  );
+}

package/dist/registry/package/components/Card/index.tsx

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("sia-card", className)} {...props} />; }
+export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("sia-card__header", className)} {...props} />; }
+export function CardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("sia-card__body", className)} {...props} />; }
+export function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("sia-card__footer", className)} {...props} />; }

package/dist/registry/package/components/Card/styles.css

@@ -0,0 +1,4 @@
+.sia-card { overflow:hidden; border:1px solid var(--sia-border); border-radius:calc(var(--sia-radius) * 1.25); background:var(--sia-background); box-shadow:0 1px 2px rgb(15 23 42 / .06); }
+.sia-card__header,.sia-card__body,.sia-card__footer { padding:1rem 1.25rem; }
+.sia-card__header { border-bottom:1px solid var(--sia-border); }
+.sia-card__footer { border-top:1px solid var(--sia-border); background:var(--sia-surface); }