@caseparts-org/caseblocks 0.0.71 → 0.0.73

package/dist/assets/Text.css

@@ -1 +1 @@
-._text-body_1l0ox_1{font-family:var(--font-family-body),sans-serif}._text-display_1l0ox_4{font-family:var(--font-family-display)}._text-xxs_1l0ox_8{font-size:var(--font-size-xxs);line-height:var(--line-height-xxs)}._text-xs_1l0ox_12{font-size:var(--font-size-xs);line-height:var(--line-height-xs)}._text-sm_1l0ox_16{font-size:var(--font-size-sm);line-height:var(--line-height-sm)}._text-md_1l0ox_20{font-size:var(--font-size-md);line-height:var(--line-height-md)}._text-lg_1l0ox_24{font-size:var(--font-size-lg);line-height:var(--line-height-lg)}._text-xl_1l0ox_28{font-size:var(--font-size-xl);line-height:var(--line-height-xl)}._text-2xl_1l0ox_32{font-size:var(--font-size-2xl);line-height:var(--line-height-2xl)}._text-3xl_1l0ox_36{font-size:var(--font-size-3xl);line-height:var(--line-height-3xl)}._text-4xl_1l0ox_40{font-size:var(--font-size-4xl);line-height:var(--line-height-4xl)}._text-5xl_1l0ox_44{font-size:var(--font-size-5xl);line-height:var(--line-height-5xl)}._text-6xl_1l0ox_48{font-size:var(--font-size-6xl);line-height:var(--line-height-6xl)}._text-thin_1l0ox_53{font-weight:var(--font-weight-thin)}._text-extra-light_1l0ox_56{font-weight:var(--font-weight-extra-light)}._text-light_1l0ox_59{font-weight:var(--font-weight-light)}._text-regular_1l0ox_62{font-weight:var(--font-weight-regular)}._text-medium_1l0ox_65{font-weight:var(--font-weight-medium)}._text-semibold_1l0ox_68{font-weight:var(--font-weight-semibold)}._text-bold_1l0ox_71{font-weight:var(--font-weight-bold)}
+._text-body_1x8xm_1{font-family:var(--font-family-body),sans-serif}._text-display_1x8xm_4{font-family:var(--font-family-display)}._text-xxs_1x8xm_8{font-size:var(--font-size-xxs);line-height:var(--line-height-xxs)}._text-xs_1x8xm_12{font-size:var(--font-size-xs);line-height:var(--line-height-xs)}._text-sm_1x8xm_16{font-size:var(--font-size-sm);line-height:var(--line-height-sm)}._text-md_1x8xm_20{font-size:var(--font-size-md);line-height:var(--line-height-md)}._text-lg_1x8xm_24{font-size:var(--font-size-lg);line-height:var(--line-height-lg)}._text-xl_1x8xm_28{font-size:var(--font-size-xl);line-height:var(--line-height-xl)}._text-2xl_1x8xm_32{font-size:var(--font-size-2xl);line-height:var(--line-height-2xl)}._text-3xl_1x8xm_36{font-size:var(--font-size-3xl);line-height:var(--line-height-3xl)}._text-4xl_1x8xm_40{font-size:var(--font-size-4xl);line-height:var(--line-height-4xl)}._text-5xl_1x8xm_44{font-size:var(--font-size-5xl);line-height:var(--line-height-5xl)}._text-6xl_1x8xm_48{font-size:var(--font-size-6xl);line-height:var(--line-height-6xl)}._text-thin_1x8xm_53{font-weight:var(--font-weight-thin)}._text-extra-light_1x8xm_56{font-weight:var(--font-weight-extra-light)}._text-light_1x8xm_59{font-weight:var(--font-weight-light)}._text-regular_1x8xm_62{font-weight:var(--font-weight-regular)}._text-medium_1x8xm_65{font-weight:var(--font-weight-medium)}._text-semibold_1x8xm_68{font-weight:var(--font-weight-semibold)}._text-bold_1x8xm_71{font-weight:var(--font-weight-bold)}._text-color-inherit_1x8xm_75{color:inherit}._text-color-warning_1x8xm_76{color:var(--text-text-caution)}._text-color-disabled_1x8xm_77{color:var(--text-text-disabled)}._text-color-error-warning_1x8xm_78{color:var(--text-text-error-warning)}._text-color-default-inverted_1x8xm_79{color:var(--text-text-invert)}._text-color-links_1x8xm_80{color:var(--text-text-links)}._text-color-links-hover-press_1x8xm_81{color:var(--text-text-links-hover-press)}._text-color-primary_1x8xm_82{color:var(--text-text-primary)}._text-color-quaternary_1x8xm_83{color:var(--text-text-quaternary)}._text-color-search-bar_1x8xm_84{color:var(--text-text-search-bar)}._text-color-secondary_1x8xm_85{color:var(--text-text-secondary)}._text-color-success_1x8xm_86{color:var(--text-text-success)}._text-color-tertiary_1x8xm_87{color:var(--text-text-tertiary)}._text-color-footer_1x8xm_88{color:var(--text-text-footer)}

package/dist/atoms/Button/buttonClassName.js

@@ -1,4 +1,4 @@
-import { t as s } from "../../Text.module-smM1g1J4.js";
+import { t as s } from "../../Text.module-Dzhzk2fH.js";
 import { c as u } from "../../clsx-OuTLNxxd.js";
 import { getHideAtStyles as r } from "../HideAt.js";
 import '../../assets/buttonClassName.css';const i = "_button_khsww_1", t = {

package/dist/atoms/Link/Link.d.ts

@@ -1,105 +1,17 @@
 import { default as React } from 'react';
 import { HideAtProps } from '../HideAt';
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, HideAtProps {
-    external?: boolean;
     href: string;
-    children: React.ReactNode;
     disabled?: boolean;
-    /** Skip default link styling (still applies responsive + disabled adjustments). */
     unstyled?: boolean;
-}
-/** Signature an external router link (e.g. next/link) must satisfy */
-export type LinkComponent = (_props: LinkProps) => JSX.Element;
-export declare function LinkProvider({ component, children, }: {
-    component: LinkComponent;
+    external?: boolean;
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- *
- * Framework‑agnostic link component with an injectable routing implementation.
- *
- * By default it renders a styled `<a>`. Consumers (e.g. a Next.js or React Router app)
- * can wrap their application in a <LinkProvider /> to override navigation while
- * preserving styling, accessibility, disabled handling, and responsive visibility logic.
- *
- * ## Why a provider?
- * Central injection means every internal usage of <Link /> inside the design system
- * (e.g. in CategoryNav, MainNav, etc.) automatically adopts the host app's router
- * without changing those components or sprinkling `as` props everywhere.
- *
- * ## Disabled behavior
- * - Adds `aria-disabled`
- * - Prevents default navigation & stops propagation
- * - Removes from tab order (tabIndex = -1)
- * - Applies a disabled style
- *
- * ## Responsive visibility
- * Accepts `hideAt?: Breakpoint[]` (see HideAt) to conditionally hide via utility classes.
- *
- * ## Usage (Default / No Provider)
- * ```tsx
- * <Link href="/parts/123">View Part</Link>
- * ```
- *
- * ## Usage (Next.js)
- * Create an app-level provider so all CaseBlocks links use Next.js client navigation & prefetch.
- *
- * ```tsx
- * // app/providers.tsx (or pages/_app.tsx)
- * import React from 'react';
- * import NextLink from 'next/link';
- * import { LinkProvider, LinkProps } from 'atoms/Link/Link';
- *
- * export function AppProviders({ children }: { children: React.ReactNode }) {
- *   return (
- *     <LinkProvider
- *       component={(p: LinkProps) => (
- *         // Next.js <Link> accepts anchor props like className, onClick, etc.
- *         <NextLink href={p.href} className={p.className} prefetch>
- *           {p.children}
- *         </NextLink>
- *       )}
- *     >
- *       {children}
- *     </LinkProvider>
- *   );
- * }
- * ```
- *
- * Now every internal <Link /> (e.g. in <CategoryNav />) uses Next.js routing automatically.
- *
- * ## Usage (react-router-dom)
- * ```tsx
- * import { Link as RouterLink } from 'react-router-dom';
- * import { LinkProvider, LinkProps } from 'atoms/Link/Link';
- *
- * function AppProviders({ children }: { children: React.ReactNode }) {
- *   return (
- *     <LinkProvider
- *       component={({ href, children, className, ...rest }: LinkProps) => (
- *         <RouterLink to={href} className={className} {...rest}>
- *           {children}
- *         </RouterLink>
- *       )}
- *     >
- *       {children}
- *     </LinkProvider>
- *   );
- * }
- * ```
- *
- * ## Supplying a custom implementation
- * The injected component receives already-prepared props:
- * - className (merged styles + responsive + disabled)
- * - href (or "#" when disabled)
- * - aria-disabled / tabIndex adjustments
- * - onClick handler (prevents navigation when disabled)
- *
- * You normally just map `href` to your router's expected prop (`href` for Next.js, `to` for react-router).
- *
- * ## Edge cases / Notes
- * - If your router component must wrap an <a>, you can still do so; styling is already on the outer element.
- * - Do not reimplement disabled logic in the injected component (already handled).
- * - If you need additional router-only props (e.g. prefetch={false}), extend in the adapter inside your app, not here.
- */
-export declare function Link({ external, href, children, disabled, unstyled, hideAt, className, onClick, ...otherProps }: LinkProps): import("react/jsx-runtime").JSX.Element;
+}
+export declare function linkClassName({ className, unstyled, disabled, hideAt }: {
+    className?: string;
+    unstyled?: boolean;
+    disabled?: boolean;
+    hideAt?: HideAtProps["hideAt"];
+}): string;
+/** SSR‑safe base link primitive */
+export declare function Link({ href, disabled, unstyled, external, hideAt, className, children, onClick, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/Link/Link.js

@@ -1,57 +1,55 @@
-import { jsx as e } from "react/jsx-runtime";
-import p from "react";
-import { t as g } from "../../Text.module-smM1g1J4.js";
-import { c as v } from "../../clsx-OuTLNxxd.js";
-import { getHideAtStyles as y } from "../HideAt.js";
-import '../../assets/Link.css';const I = "_link_ygp31_1", L = "_disabled_ygp31_14", c = {
-  link: I,
-  disabled: L
-}, u = p.createContext(null);
-function j({
-  component: n,
-  children: r
+import { jsx as d } from "react/jsx-runtime";
+import { t as u } from "../../Text.module-Dzhzk2fH.js";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import { getHideAtStyles as g } from "../HideAt.js";
+import '../../assets/Link.css';const k = "_link_ygp31_1", y = "_disabled_ygp31_14", i = {
+  link: k,
+  disabled: y
+};
+function b({
+  className: e,
+  unstyled: t,
+  disabled: n,
+  hideAt: s
 }) {
-  return /* @__PURE__ */ e(u.Provider, { value: n, children: r });
+  return _(
+    e,
+    !t && u["text-body"],
+    !t && i.link,
+    n && i.disabled,
+    g(s)
+  );
 }
-function A({
-  external: n,
-  href: r,
-  children: o,
+function S({
+  href: e,
   disabled: t = !1,
-  unstyled: l = !1,
-  hideAt: x,
-  className: k,
-  onClick: a,
-  ...s
+  unstyled: n = !1,
+  external: s,
+  hideAt: l,
+  className: f,
+  children: m,
+  onClick: r,
+  ...o
 }) {
-  const m = p.useContext(u), _ = v(
-    k,
-    !l && g["text-body"],
-    !l && c.link,
-    t && c.disabled,
-    y(x)
-  );
-  function d(f) {
+  function p(a) {
     if (t) {
-      f.preventDefault(), f.stopPropagation();
+      a.preventDefault(), a.stopPropagation();
       return;
     }
-    a == null || a(f);
+    r == null || r(a);
   }
-  const i = {
-    ...s,
-    href: t ? "#" : r,
-    className: _,
-    children: o,
-    disabled: t,
-    onClick: d,
+  const c = b({ className: f, unstyled: n, disabled: t, hideAt: l }), x = {
+    ...o,
+    href: t ? "#" : e,
+    className: c,
+    onClick: p,
     "aria-disabled": t || void 0,
-    tabIndex: t ? -1 : s.tabIndex,
-    role: t ? "link" : s.role
+    tabIndex: t ? -1 : o.tabIndex,
+    role: t ? "link" : o.role
   };
-  return n ? /* @__PURE__ */ e("a", { ...i, children: o }) : m ? /* @__PURE__ */ e(m, { ...i }) : /* @__PURE__ */ e("a", { ...i, children: o });
+  return /* @__PURE__ */ d("a", { ...x, children: m });
 }
 export {
-  A as Link,
-  j as LinkProvider
+  S as Link,
+  b as linkClassName
 };

package/dist/atoms/Link/createLinkAdapter.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { LinkProps } from './Link';
+/** Minimal contract a router link should satisfy */
+export type RouterLike = React.ComponentType<{
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>>;
+/** Build a styled, disabled-aware Link that delegates navigation to RouterLike */
+export declare function createLinkAdapter(RouterComponent: RouterLike): ({ href, disabled, unstyled, hideAt, className, children, onClick, ...rest }: LinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/atoms/Link/createLinkAdapter.js

@@ -0,0 +1,39 @@
+import { jsx as l } from "react/jsx-runtime";
+import { linkClassName as x } from "./Link.js";
+function k(a) {
+  return function({
+    href: o,
+    disabled: r = !1,
+    unstyled: f = !1,
+    hideAt: p,
+    className: i,
+    children: m,
+    onClick: t,
+    ...n
+  }) {
+    function u(e) {
+      if (r) {
+        e.preventDefault(), e.stopPropagation();
+        return;
+      }
+      t == null || t(e);
+    }
+    const c = x({ className: i, unstyled: f, disabled: r, hideAt: p });
+    return /* @__PURE__ */ l(
+      a,
+      {
+        ...n,
+        href: r ? "#" : o,
+        className: c,
+        onClick: u,
+        "aria-disabled": r || void 0,
+        tabIndex: r ? -1 : n.tabIndex,
+        role: r ? "link" : n.role,
+        children: m
+      }
+    );
+  };
+}
+export {
+  k as createLinkAdapter
+};

package/dist/atoms/Text/Text.d.ts

@@ -10,6 +10,7 @@ export type TextProps<T extends ElementType = "span"> = HideAtProps & {
     variant?: "body" | "display";
     /** The weight of the text. */
     weight?: "thin" | "extra-light" | "light" | "regular" | "medium" | "semibold" | "bold";
+    colorToken?: 'inherit' | 'warning' | 'disabled' | 'error-warning' | 'default-inverted' | 'links' | 'links-hover-press' | 'primary' | 'quaternary' | 'search-bar' | 'secondary' | 'success' | 'tertiary' | 'footer';
 } & Omit<React.ComponentPropsWithoutRef<T>, "size">;
-export declare function Text<T extends ElementType = "span">({ as, size, variant, weight, children, hideAt, className, ...otherProps }: TextProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Text<T extends ElementType = "span">({ as, size, variant, weight, colorToken, children, hideAt, className, ...otherProps }: TextProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/atoms/Text/Text.js

@@ -1,32 +1,34 @@
 import { jsx as a } from "react/jsx-runtime";
-import { getHideAtStyles as i } from "../HideAt.js";
-import { t } from "../../Text.module-smM1g1J4.js";
-import { c } from "../../clsx-OuTLNxxd.js";
-function d({
+import { getHideAtStyles as c } from "../HideAt.js";
+import { t } from "../../Text.module-Dzhzk2fH.js";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+function g({
   as: o,
   size: e,
   variant: r = "body",
   weight: m = "regular",
+  colorToken: n = "inherit",
   children: s,
-  hideAt: n,
-  className: p,
-  ...x
+  hideAt: x,
+  className: i,
+  ...p
 }) {
   return /* @__PURE__ */ a(
     o || "span",
     {
-      className: c(
+      className: l(
         t[`text-${r}`],
         t[`text-${e}`],
         t[`text-${m}`],
-        i(n),
-        p
+        t[`text-color-${n}`],
+        c(x),
+        i
       ),
-      ...x,
+      ...p,
       children: s
     }
   );
 }
 export {
-  d as Text
+  g as Text
 };

package/dist/atoms/Text/Text.stories.d.ts

@@ -15,3 +15,4 @@ export declare const Sizes: StoryObj<typeof Text>;
 export declare const Variants: StoryObj<typeof Text>;
 export declare const Weights: StoryObj<typeof Text>;
 export declare const AsElementType: StoryObj<typeof Text>;
+export declare const ColorTokens: StoryObj<typeof Text>;

package/dist/atoms/Text/Text.stories.js

@@ -1,7 +1,7 @@
-import { jsx as s, jsxs as l } from "react/jsx-runtime";
+import { jsx as l, jsxs as s } from "react/jsx-runtime";
 import { Text as i } from "./Text.js";
-import { Flex as r } from "../Flex/Flex.js";
-const p = {
+import { Flex as a } from "../Flex/Flex.js";
+const m = {
   title: "Case Parts/Atoms/Text",
   component: i,
   parameters: {
@@ -10,12 +10,12 @@ const p = {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
-}, m = {
+}, h = {
   args: {
     size: "sm",
     children: "Text value"
   }
-}, a = [
+}, t = [
   "xxs",
   "xs",
   "sm",
@@ -27,17 +27,17 @@ const p = {
   "4xl",
   "5xl",
   "6xl"
-], h = {
-  render: () => /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: a.map((e) => /* @__PURE__ */ l(i, { size: e, children: [
+], y = {
+  render: () => /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: t.map((e) => /* @__PURE__ */ s(i, { size: e, children: [
     e.charAt(0).toUpperCase() + e.slice(1),
     " Text"
   ] }, e)) })
-}, n = ["body", "display"], y = {
-  render: () => /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: n.map((e) => /* @__PURE__ */ l(i, { size: "md", variant: e, children: [
+}, n = ["body", "display"], f = {
+  render: () => /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: n.map((e) => /* @__PURE__ */ s(i, { size: "md", variant: e, children: [
     "variant: ",
     e
   ] }, e)) })
-}, t = [
+}, r = [
   "thin",
   "extra-light",
   "light",
@@ -45,24 +45,24 @@ const p = {
   "medium",
   "semibold",
   "bold"
-], f = {
-  render: () => /* @__PURE__ */ l(r, { flexDirection: "row", style: { gap: "100px" }, children: [
-    /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
-      /* @__PURE__ */ s(i, { size: "xl", weight: "bold", children: "`body` variant" }),
-      t.map((e) => /* @__PURE__ */ l(i, { size: "lg", weight: e, children: [
+], g = {
+  render: () => /* @__PURE__ */ s(a, { flexDirection: "row", style: { gap: "100px" }, children: [
+    /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+      /* @__PURE__ */ l(i, { size: "xl", weight: "bold", children: "`body` variant" }),
+      r.map((e) => /* @__PURE__ */ s(i, { size: "lg", weight: e, children: [
         e,
         " Text"
       ] }, e))
     ] }),
-    /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
-      /* @__PURE__ */ s(i, { size: "xl", weight: "bold", variant: "display", children: "`display` variant" }),
-      t.map((e) => /* @__PURE__ */ l(i, { size: "lg", weight: e, variant: "display", children: [
+    /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+      /* @__PURE__ */ l(i, { size: "xl", weight: "bold", variant: "display", children: "`display` variant" }),
+      r.map((e) => /* @__PURE__ */ s(i, { size: "lg", weight: e, variant: "display", children: [
         e,
         " Text"
       ] }, e))
     ] })
   ] })
-}, d = [
+}, o = [
   "span",
   "p",
   "h1",
@@ -72,18 +72,78 @@ const p = {
   "h5",
   "h6",
   "div"
-], g = {
-  render: () => /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: d.map((e) => /* @__PURE__ */ l(i, { size: "lg", as: e, children: [
+], u = {
+  render: () => /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: o.map((e) => /* @__PURE__ */ s(i, { size: "lg", as: e, children: [
     "Rendered as `",
     e,
     "` element"
   ] }, e)) })
+}, d = [
+  "inherit",
+  "warning",
+  "disabled",
+  "error-warning",
+  "default-inverted",
+  "links",
+  "links-hover-press",
+  "primary",
+  "quaternary",
+  "search-bar",
+  "secondary",
+  "success",
+  "tertiary",
+  "footer"
+], v = {
+  name: "Colors",
+  parameters: {
+    docs: {
+      description: {
+        story: "Visual reference for the `colorToken` prop. Each swatch uses a token via a CSS class (e.g. `.text-color-primary`). Tokens map to semantic design values defined in `tokens.css`."
+      }
+    }
+  },
+  render: () => /* @__PURE__ */ l("div", { style: {
+    display: "grid",
+    gap: "16px",
+    gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+    alignItems: "stretch",
+    width: "100%",
+    maxWidth: 1e3
+  }, children: d.map((e) => /* @__PURE__ */ s(
+    "div",
+    {
+      style: {
+        border: "1px solid #e0e0e0",
+        borderRadius: 6,
+        background: "#fff",
+        padding: "8px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        fontFamily: "sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ s(i, { size: "sm", weight: "semibold", as: "div", children: [
+          "`",
+          e,
+          "`"
+        ] }),
+        /* @__PURE__ */ l(i, { size: "md", colorToken: e, as: "div", children: "Sample text" }),
+        /* @__PURE__ */ s(i, { size: "xs", as: "div", style: { fontFamily: "monospace" }, children: [
+          "class: text-color-",
+          e
+        ] })
+      ]
+    },
+    e
+  )) })
 };
 export {
-  m as AllProps,
-  g as AsElementType,
-  h as Sizes,
-  y as Variants,
-  f as Weights,
-  p as default
+  h as AllProps,
+  u as AsElementType,
+  v as ColorTokens,
+  y as Sizes,
+  f as Variants,
+  g as Weights,
+  m as default
 };

package/dist/main-client.d.ts

@@ -1,6 +1,4 @@
 export * from './main-server';
-export { Link, LinkProvider } from './atoms/Link/Link';
-export type { LinkProps } from './atoms/Link/Link';
 export { LinkButton } from './atoms/LinkButton/LinkButton';
 export type { LinkButtonProps } from './atoms/LinkButton/LinkButton';
 export { Image, ImageProvider } from './atoms/Image/Image';
@@ -35,3 +33,5 @@ export { NotFound } from './organisms/NotFound/NotFound';
 export type { NotFoundProps } from './organisms/NotFound/NotFound';
 export { Carousel } from './organisms/Carousel/Carousel';
 export type { CarouselProps } from './organisms/Carousel/Carousel';
+export { Footer } from './organisms/Footer/Footer';
+export type { FooterProps } from './organisms/Footer/Footer';