@ps1ui/core 0.0.1 → 0.2.0

package/dist/components/Stack/Stack.d.mts

@@ -7,10 +7,24 @@ type StackGap = SpaceScale;
 type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
 type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
 type StackProps = ComponentProps<"div"> & {
+  /**
+   * Main-axis direction.
+   * @default "column"
+   */
   direction?: Responsive<StackDirection>;
+  /**
+   * Gap between items on the space scale.
+   * @default "md"
+   */
   gap?: Responsive<StackGap>;
+  /** Cross-axis alignment (align-items). */
   align?: Responsive<StackAlign>;
+  /** Main-axis distribution (justify-content). */
   justify?: Responsive<StackJustify>;
+  /**
+   * Wrap items onto multiple lines instead of overflowing.
+   * @default false
+   */
   wrap?: Responsive<boolean>;
 };
 declare function Stack({ direction, gap, align, justify, wrap, className, style, ...rest }: StackProps): import("react").JSX.Element;

package/dist/components/Stack/Stack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.mjs","names":[],"sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { spaceToVar, type SpaceScale } from \"../../utils/spacing\";\n\nexport type StackDirection = \"row\" | \"column\";\nexport type StackGap = SpaceScale;\nexport type StackAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\nexport type StackJustify = \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\";\n\nexport type StackProps = ComponentProps<\"div\"> & {\n  direction?: Responsive<StackDirection>;\n  gap?: Responsive<StackGap>;\n  align?: Responsive<StackAlign>;\n  justify?: Responsive<StackJustify>;\n  wrap?: Responsive<boolean>;\n};\n\n// direction values pass straight through — CSS flex-direction accepts\n// `row` / `column` (and `row-reverse` / `column-reverse`, which the union\n// deliberately excludes; add those to the union if the API ever grows).\nconst directionToValue = (v: StackDirection): string => v;\n\n// Flexbox uses `flex-start` / `flex-end` in the box-alignment spec. The\n// StackAlign union exposes the shorter `start` / `end` alias for terseness;\n// the transform remaps them so the CSS variable holds a valid `align-items`\n// value directly.\nconst alignToValue = (v: StackAlign): string => {\n  switch (v) {\n    case \"start\":\n      return \"flex-start\";\n    case \"end\":\n      return \"flex-end\";\n    default:\n      return v;\n  }\n};\n\n// Same treatment as `alignToValue`, plus expansions for the `space-*`\n// justify-content variants.\nconst justifyToValue = (v: StackJustify): string => {\n  switch (v) {\n    case \"start\":\n      return \"flex-start\";\n    case \"end\":\n      return \"flex-end\";\n    case \"between\":\n      return \"space-between\";\n    case \"around\":\n      return \"space-around\";\n    case \"evenly\":\n      return \"space-evenly\";\n    default:\n      return v;\n  }\n};\n\n// boolean → CSS flex-wrap keyword.\nconst wrapToValue = (v: boolean): string => (v ? \"wrap\" : \"nowrap\");\n\nexport function Stack({\n  direction,\n  gap,\n  align,\n  justify,\n  wrap,\n  className,\n  style,\n  ...rest\n}: StackProps) {\n  const directionVars = resolveResponsive(direction, \"--_stack-direction\", directionToValue);\n  const gapVars = resolveResponsive(gap, \"--_stack-gap\", spaceToVar);\n  const alignVars = resolveResponsive(align, \"--_stack-align\", alignToValue);\n  const justifyVars = resolveResponsive(justify, \"--_stack-justify\", justifyToValue);\n  const wrapVars = resolveResponsive(wrap, \"--_stack-wrap\", wrapToValue);\n\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...directionVars,\n    ...gapVars,\n    ...alignVars,\n    ...justifyVars,\n    ...wrapVars,\n  } as CSSProperties;\n\n  return <div {...rest} className={cx(\"ps1ui-stack\", className)} style={mergedStyle} />;\n}\n"],"mappings":";;;;;AAqBA,MAAM,oBAAoB,MAA8B;AAMxD,MAAM,gBAAgB,MAA0B;CAC9C,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAIA,MAAM,kBAAkB,MAA4B;CAClD,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAGA,MAAM,eAAe,MAAwB,IAAI,SAAS;AAE1D,SAAgB,MAAM,EACpB,WACA,KACA,OACA,SACA,MACA,WACA,OACA,GAAG,QACU;CACb,MAAM,gBAAgB,kBAAkB,WAAW,sBAAsB,gBAAgB;CACzF,MAAM,UAAU,kBAAkB,KAAK,gBAAgB,UAAU;CACjE,MAAM,YAAY,kBAAkB,OAAO,kBAAkB,YAAY;CACzE,MAAM,cAAc,kBAAkB,SAAS,oBAAoB,cAAc;CACjF,MAAM,WAAW,kBAAkB,MAAM,iBAAiB,WAAW;CAIrE,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;CACL;CAEA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,eAAe,SAAS;EAAG,OAAO;CAAc,CAAA;AACtF"}
+{"version":3,"file":"Stack.mjs","names":[],"sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { spaceToVar, type SpaceScale } from \"../../utils/spacing\";\n\nexport type StackDirection = \"row\" | \"column\";\nexport type StackGap = SpaceScale;\nexport type StackAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\nexport type StackJustify = \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\";\n\nexport type StackProps = ComponentProps<\"div\"> & {\n  /**\n   * Main-axis direction.\n   * @default \"column\"\n   */\n  direction?: Responsive<StackDirection>;\n  /**\n   * Gap between items on the space scale.\n   * @default \"md\"\n   */\n  gap?: Responsive<StackGap>;\n  /** Cross-axis alignment (align-items). */\n  align?: Responsive<StackAlign>;\n  /** Main-axis distribution (justify-content). */\n  justify?: Responsive<StackJustify>;\n  /**\n   * Wrap items onto multiple lines instead of overflowing.\n   * @default false\n   */\n  wrap?: Responsive<boolean>;\n};\n\n// direction values pass straight through — CSS flex-direction accepts\n// `row` / `column` (and `row-reverse` / `column-reverse`, which the union\n// deliberately excludes; add those to the union if the API ever grows).\nconst directionToValue = (v: StackDirection): string => v;\n\n// Flexbox uses `flex-start` / `flex-end` in the box-alignment spec. The\n// StackAlign union exposes the shorter `start` / `end` alias for terseness;\n// the transform remaps them so the CSS variable holds a valid `align-items`\n// value directly.\nconst alignToValue = (v: StackAlign): string => {\n  switch (v) {\n    case \"start\":\n      return \"flex-start\";\n    case \"end\":\n      return \"flex-end\";\n    default:\n      return v;\n  }\n};\n\n// Same treatment as `alignToValue`, plus expansions for the `space-*`\n// justify-content variants.\nconst justifyToValue = (v: StackJustify): string => {\n  switch (v) {\n    case \"start\":\n      return \"flex-start\";\n    case \"end\":\n      return \"flex-end\";\n    case \"between\":\n      return \"space-between\";\n    case \"around\":\n      return \"space-around\";\n    case \"evenly\":\n      return \"space-evenly\";\n    default:\n      return v;\n  }\n};\n\n// boolean → CSS flex-wrap keyword.\nconst wrapToValue = (v: boolean): string => (v ? \"wrap\" : \"nowrap\");\n\nexport function Stack({\n  direction,\n  gap,\n  align,\n  justify,\n  wrap,\n  className,\n  style,\n  ...rest\n}: StackProps) {\n  const directionVars = resolveResponsive(direction, \"--_stack-direction\", directionToValue);\n  const gapVars = resolveResponsive(gap, \"--_stack-gap\", spaceToVar);\n  const alignVars = resolveResponsive(align, \"--_stack-align\", alignToValue);\n  const justifyVars = resolveResponsive(justify, \"--_stack-justify\", justifyToValue);\n  const wrapVars = resolveResponsive(wrap, \"--_stack-wrap\", wrapToValue);\n\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...directionVars,\n    ...gapVars,\n    ...alignVars,\n    ...justifyVars,\n    ...wrapVars,\n  } as CSSProperties;\n\n  return <div {...rest} className={cx(\"ps1ui-stack\", className)} style={mergedStyle} />;\n}\n"],"mappings":";;;;;AAmCA,MAAM,oBAAoB,MAA8B;AAMxD,MAAM,gBAAgB,MAA0B;CAC9C,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAIA,MAAM,kBAAkB,MAA4B;CAClD,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAGA,MAAM,eAAe,MAAwB,IAAI,SAAS;AAE1D,SAAgB,MAAM,EACpB,WACA,KACA,OACA,SACA,MACA,WACA,OACA,GAAG,QACU;CACb,MAAM,gBAAgB,kBAAkB,WAAW,sBAAsB,gBAAgB;CACzF,MAAM,UAAU,kBAAkB,KAAK,gBAAgB,UAAU;CACjE,MAAM,YAAY,kBAAkB,OAAO,kBAAkB,YAAY;CACzE,MAAM,cAAc,kBAAkB,SAAS,oBAAoB,cAAc;CACjF,MAAM,WAAW,kBAAkB,MAAM,iBAAiB,WAAW;CAIrE,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;CACL;CAEA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,eAAe,SAAS;EAAG,OAAO;CAAc,CAAA;AACtF"}

package/dist/components/Text/Text.d.mts

@@ -3,14 +3,22 @@ import { FontWeight } from "../../utils/typography.mjs";
 import { CSSProperties, ComponentPropsWithoutRef } from "react";
 //#region src/components/Text/Text.d.ts
 type TextElement = "p" | "span" | "div" | "label" | "strong" | "em" | "small";
-type TextVariant = "body" | "muted" | "subtle" | "primary" | "accent";
+type TextVariant = "body" | "muted" | "subtle" | "primary" | "accent" | "danger";
 type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
 type TextWeight = FontWeight;
 type TextOwnProps<E extends TextElement> = {
+  /** Element to render. */
   as?: E;
+  /** Color variant. */
   variant?: TextVariant;
+  /**
+   * Font size on the type scale.
+   * @default "sm"
+   */
   size?: Responsive<TextSize>;
+  /** Font weight. */
   weight?: Responsive<TextWeight>;
+  /** Truncate overflowing text with an ellipsis instead of wrapping. */
   truncate?: boolean;
 };
 type TextProps<E extends TextElement = "p"> = TextOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps<E>>;

package/dist/components/Text/Text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.mjs","names":[],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { fontSizeToVar, weightToValue, type FontWeight } from \"../../utils/typography\";\n\nexport type TextElement = \"p\" | \"span\" | \"div\" | \"label\" | \"strong\" | \"em\" | \"small\";\n\nexport type TextVariant = \"body\" | \"muted\" | \"subtle\" | \"primary\" | \"accent\";\nexport type TextSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n// TextWeight is a re-export of the shared FontWeight scale. Keeping a\n// component-local alias preserves the public type name (backwards compat)\n// while the underlying scale stays single-sourced in utils/typography.ts.\nexport type TextWeight = FontWeight;\n\ntype TextOwnProps<E extends TextElement> = {\n  as?: E;\n  variant?: TextVariant;\n  size?: Responsive<TextSize>;\n  weight?: Responsive<TextWeight>;\n  truncate?: boolean;\n};\n\n// Deliberate exception to the general \"use ComponentProps<'tag'>\" rule other components follow.\n// With the polymorphic `as` prop, TypeScript cannot narrow the `ref` prop's type against the\n// resolved element E — allowing `ref` here would silently accept mismatched ref types\n// (e.g. a ref typed for HTMLParagraphElement on `<Text as=\"span\" ref={…} />`). Keeping `ref`\n// out of the prop type entirely is safer than a misleading loose type; don't switch this\n// to ComponentProps for consistency with the other components.\nexport type TextProps<E extends TextElement = \"p\"> = TextOwnProps<E> &\n  Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps<E>>;\n\n// Exhaustive over TextElement so adding a tag without classifying it fails to typecheck,\n// instead of silently leaving truncate's inline-block fix un-applied for that tag.\nconst INLINE_TEXT_ELEMENTS: Record<TextElement, boolean> = {\n  p: false,\n  div: false,\n  span: true,\n  label: true,\n  strong: true,\n  em: true,\n  small: true,\n};\n\nexport function Text<E extends TextElement = \"p\">({\n  as,\n  variant = \"body\",\n  size,\n  weight,\n  truncate = false,\n  className,\n  style,\n  ...rest\n}: TextProps<E>) {\n  const tag = as ?? \"p\";\n  const sizeVars = resolveResponsive(size, \"--_text-size\", fontSizeToVar);\n  const weightVars = resolveResponsive(weight, \"--_text-weight\", weightToValue);\n\n  const classes = cx(\n    \"ps1ui-text\",\n    `ps1ui-text--${variant}`,\n    truncate && \"ps1ui-text--truncate\",\n    truncate && INLINE_TEXT_ELEMENTS[tag] && \"ps1ui-text--truncate-inline\",\n    className,\n  );\n\n  // Caller style first, resolved vars last: `--_*` is the reserved internal\n  // prefix and wins on purpose — responsive values are prop-controlled. Cast\n  // because csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...sizeVars,\n    ...weightVars,\n  } as CSSProperties;\n\n  return createElement(tag, { ...rest, className: classes, style: mergedStyle });\n}\n"],"mappings":";;;;;AAkCA,MAAM,uBAAqD;CACzD,GAAG;CACH,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,IAAI;CACJ,OAAO;AACT;AAEA,SAAgB,KAAkC,EAChD,IACA,UAAU,QACV,MACA,QACA,WAAW,OACX,WACA,OACA,GAAG,QACY;CACf,MAAM,MAAM,MAAM;CAClB,MAAM,WAAW,kBAAkB,MAAM,gBAAgB,aAAa;CACtE,MAAM,aAAa,kBAAkB,QAAQ,kBAAkB,aAAa;CAE5E,MAAM,UAAU,GACd,cACA,eAAe,WACf,YAAY,wBACZ,YAAY,qBAAqB,QAAQ,+BACzC,SACF;CAKA,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;CACL;CAEA,OAAO,cAAc,KAAK;EAAE,GAAG;EAAM,WAAW;EAAS,OAAO;CAAY,CAAC;AAC/E"}
+{"version":3,"file":"Text.mjs","names":[],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { fontSizeToVar, weightToValue, type FontWeight } from \"../../utils/typography\";\n\nexport type TextElement = \"p\" | \"span\" | \"div\" | \"label\" | \"strong\" | \"em\" | \"small\";\n\nexport type TextVariant = \"body\" | \"muted\" | \"subtle\" | \"primary\" | \"accent\" | \"danger\";\nexport type TextSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n// TextWeight is a re-export of the shared FontWeight scale. Keeping a\n// component-local alias preserves the public type name (backwards compat)\n// while the underlying scale stays single-sourced in utils/typography.ts.\nexport type TextWeight = FontWeight;\n\ntype TextOwnProps<E extends TextElement> = {\n  /** Element to render. */\n  as?: E;\n  /** Color variant. */\n  variant?: TextVariant;\n  /**\n   * Font size on the type scale.\n   * @default \"sm\"\n   */\n  size?: Responsive<TextSize>;\n  /** Font weight. */\n  weight?: Responsive<TextWeight>;\n  /** Truncate overflowing text with an ellipsis instead of wrapping. */\n  truncate?: boolean;\n};\n\n// Deliberate exception to the general \"use ComponentProps<'tag'>\" rule other components follow.\n// With the polymorphic `as` prop, TypeScript cannot narrow the `ref` prop's type against the\n// resolved element E — allowing `ref` here would silently accept mismatched ref types\n// (e.g. a ref typed for HTMLParagraphElement on `<Text as=\"span\" ref={…} />`). Keeping `ref`\n// out of the prop type entirely is safer than a misleading loose type; don't switch this\n// to ComponentProps for consistency with the other components.\nexport type TextProps<E extends TextElement = \"p\"> = TextOwnProps<E> &\n  Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps<E>>;\n\n// Exhaustive over TextElement so adding a tag without classifying it fails to typecheck,\n// instead of silently leaving truncate's inline-block fix un-applied for that tag.\nconst INLINE_TEXT_ELEMENTS: Record<TextElement, boolean> = {\n  p: false,\n  div: false,\n  span: true,\n  label: true,\n  strong: true,\n  em: true,\n  small: true,\n};\n\nexport function Text<E extends TextElement = \"p\">({\n  as,\n  variant = \"body\",\n  size,\n  weight,\n  truncate = false,\n  className,\n  style,\n  ...rest\n}: TextProps<E>) {\n  const tag = as ?? \"p\";\n  const sizeVars = resolveResponsive(size, \"--_text-size\", fontSizeToVar);\n  const weightVars = resolveResponsive(weight, \"--_text-weight\", weightToValue);\n\n  const classes = cx(\n    \"ps1ui-text\",\n    `ps1ui-text--${variant}`,\n    truncate && \"ps1ui-text--truncate\",\n    truncate && INLINE_TEXT_ELEMENTS[tag] && \"ps1ui-text--truncate-inline\",\n    className,\n  );\n\n  // Caller style first, resolved vars last: `--_*` is the reserved internal\n  // prefix and wins on purpose — responsive values are prop-controlled. Cast\n  // because csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...sizeVars,\n    ...weightVars,\n  } as CSSProperties;\n\n  return createElement(tag, { ...rest, className: classes, style: mergedStyle });\n}\n"],"mappings":";;;;;AA0CA,MAAM,uBAAqD;CACzD,GAAG;CACH,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,IAAI;CACJ,OAAO;AACT;AAEA,SAAgB,KAAkC,EAChD,IACA,UAAU,QACV,MACA,QACA,WAAW,OACX,WACA,OACA,GAAG,QACY;CACf,MAAM,MAAM,MAAM;CAClB,MAAM,WAAW,kBAAkB,MAAM,gBAAgB,aAAa;CACtE,MAAM,aAAa,kBAAkB,QAAQ,kBAAkB,aAAa;CAE5E,MAAM,UAAU,GACd,cACA,eAAe,WACf,YAAY,wBACZ,YAAY,qBAAqB,QAAQ,+BACzC,SACF;CAKA,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;CACL;CAEA,OAAO,cAAc,KAAK;EAAE,GAAG;EAAM,WAAW;EAAS,OAAO;CAAY,CAAC;AAC/E"}

package/dist/components/Textarea/Textarea.d.mts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+//#region src/components/Textarea/Textarea.d.ts
+type TextareaProps = ComponentProps<"textarea">;
+declare function Textarea({ className, ...rest }: TextareaProps): import("react").JSX.Element;
+//#endregion
+export { Textarea, TextareaProps };
+//# sourceMappingURL=Textarea.d.mts.map

package/dist/components/Textarea/Textarea.mjs

@@ -0,0 +1,14 @@
+import { cx } from "../../utils/cx.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Textarea/Textarea.tsx
+function Textarea({ className, ...rest }) {
+	const classes = cx("ps1ui-textarea", className);
+	return /* @__PURE__ */ jsx("textarea", {
+		...rest,
+		className: classes
+	});
+}
+//#endregion
+export { Textarea };
+
+//# sourceMappingURL=Textarea.mjs.map

package/dist/components/Textarea/Textarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.mjs","names":[],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type TextareaProps = ComponentProps<\"textarea\">;\n\nexport function Textarea({ className, ...rest }: TextareaProps) {\n  const classes = cx(\"ps1ui-textarea\", className);\n  return <textarea {...rest} className={classes} />;\n}\n"],"mappings":";;;AAKA,SAAgB,SAAS,EAAE,WAAW,GAAG,QAAuB;CAC9D,MAAM,UAAU,GAAG,kBAAkB,SAAS;CAC9C,OAAO,oBAAC,YAAD;EAAU,GAAI;EAAM,WAAW;CAAU,CAAA;AAClD"}