@cocso-ui/react 0.2.21 → 1.0.1

package/dist/esm/components/switch/switch.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"wrapper":"switch-module_wrapper__mB3eH","switch":"switch-module_switch__KrHDz","thumb":"switch-module_thumb__sXgSl"};
+
+export { styles as default };

package/dist/esm/components/tab/tab.d.mts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Tabs } from '@base-ui/react/tabs';
+
+type TabProps = ComponentProps<typeof Tabs.Root>;
+type TabListProps = ComponentProps<typeof Tabs.List>;
+type TabTriggerProps = ComponentProps<typeof Tabs.Tab>;
+type TabContentProps = ComponentProps<typeof Tabs.Panel>;
+declare function TabRoot(props: TabProps): react_jsx_runtime.JSX.Element;
+declare function TabList(props: TabListProps): react_jsx_runtime.JSX.Element;
+declare function TabTrigger(props: TabTriggerProps): react_jsx_runtime.JSX.Element;
+declare function TabContent(props: TabContentProps): react_jsx_runtime.JSX.Element;
+declare const Tab: typeof TabRoot & {
+    displayName: "Tab";
+    List: typeof TabList;
+    Trigger: typeof TabTrigger;
+    Content: typeof TabContent;
+};
+
+export { Tab };
+export type { TabContentProps, TabListProps, TabProps, TabTriggerProps };

package/dist/esm/components/tab/tab.mjs

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { Tabs } from '@base-ui/react/tabs';
+
+function TabRoot(props) {
+  return /*#__PURE__*/jsx(Tabs.Root, {
+    ...props
+  });
+}
+function TabList(props) {
+  return /*#__PURE__*/jsx(Tabs.List, {
+    ...props
+  });
+}
+function TabTrigger(props) {
+  return /*#__PURE__*/jsx(Tabs.Tab, {
+    ...props
+  });
+}
+function TabContent(props) {
+  return /*#__PURE__*/jsx(Tabs.Panel, {
+    ...props
+  });
+}
+const Tab = Object.assign(TabRoot, {
+  displayName: "Tab",
+  List: TabList,
+  Trigger: TabTrigger,
+  Content: TabContent
+});
+
+export { Tab };

package/dist/esm/components/tooltip/tooltip.d.mts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+
+declare function TooltipArrow({ className, ...props }: ComponentProps<typeof Tooltip$1.Arrow>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, arrowPadding, ...props }: ComponentProps<typeof Tooltip$1.Popup> & Pick<ComponentProps<typeof Tooltip$1.Positioner>, "side" | "sideOffset" | "align" | "alignOffset" | "arrowPadding">): react_jsx_runtime.JSX.Element;
+declare const Tooltip: (<Payload>(props: Tooltip$1.Root.Props<Payload>) => react_jsx_runtime.JSX.Element) & {
+    displayName: "Tooltip";
+    Trigger: Tooltip$1.Trigger;
+    Content: typeof TooltipContent;
+    Arrow: typeof TooltipArrow;
+    Provider: react.FC<_base_ui_react.TooltipProviderProps>;
+};
+
+export { Tooltip };

package/dist/esm/components/tooltip/tooltip.mjs

@@ -0,0 +1,48 @@
+import { cn } from '../../cn.mjs';
+import styles from './tooltip.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+
+function TooltipArrow({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Tooltip$1.Arrow, {
+    className: cn(styles.arrow, className),
+    ...props
+  });
+}
+function TooltipContent({
+  className,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  arrowPadding,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Tooltip$1.Portal, {
+    children: /*#__PURE__*/jsx(Tooltip$1.Positioner, {
+      align: align,
+      alignOffset: alignOffset,
+      arrowPadding: arrowPadding,
+      className: styles.positioner,
+      side: side,
+      sideOffset: sideOffset,
+      children: /*#__PURE__*/jsx(Tooltip$1.Popup, {
+        className: cn(styles.content, className),
+        "data-cocso-component": "tooltip-content",
+        ...props
+      })
+    })
+  });
+}
+const Tooltip = Object.assign(Tooltip$1.Root, {
+  displayName: "Tooltip",
+  Trigger: Tooltip$1.Trigger,
+  Content: TooltipContent,
+  Arrow: TooltipArrow,
+  Provider: Tooltip$1.Provider
+});
+
+export { Tooltip };

package/dist/esm/components/tooltip/tooltip.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"content":"tooltip-module_content__gv0-E","positioner":"tooltip-module_positioner__iuJEP","arrow":"tooltip-module_arrow__HFT-V"};
+
+export { styles as default };

package/dist/esm/components/typography/typography.d.mts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { Ref, ComponentProps } from 'react';
+import { RenderProp } from '../../primitives/use-render.mjs';
+import { FontWeight, LineHeight, ResponsiveFontSize } from '../../token/typography.mjs';
+
+type BodySize = "large" | "medium" | "small" | "x-small";
+type HeadingSize = "x-large" | "large" | "medium" | "small" | "x-small";
+type TypographyPropsBase = {
+    ref?: Ref<HTMLElement>;
+    render?: RenderProp;
+    weight?: FontWeight;
+    lineHeight?: LineHeight;
+} & Omit<ComponentProps<"p">, "ref">;
+type CustomTypographyProps = TypographyPropsBase & {
+    type: "custom";
+    size?: ResponsiveFontSize | "current";
+};
+type BodyTypographyProps = TypographyPropsBase & {
+    type?: "body";
+    size?: BodySize;
+};
+type HeadingTypographyProps = TypographyPropsBase & {
+    type: "heading";
+    size?: HeadingSize;
+};
+type TypographyProps = CustomTypographyProps | BodyTypographyProps | HeadingTypographyProps;
+declare function Typography({ ref, render: renderProp, className, style: _style, color, type, weight, lineHeight, ...props }: TypographyProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+export { Typography };
+export type { BodySize, HeadingSize, TypographyProps };

package/dist/esm/components/typography/typography.mjs

@@ -0,0 +1,79 @@
+import { match } from 'ts-pattern';
+import { cn } from '../../cn.mjs';
+import styles from './typography.module.css.mjs';
+import { fontSize, lineHeight, fontWeight } from '../../token/typography.mjs';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+
+function Typography({
+  ref,
+  render: renderProp,
+  className,
+  style: _style,
+  color,
+  type = "body",
+  weight = type === "heading" ? "bold" : "normal",
+  lineHeight: lineHeight$1 = "normal",
+  ...props
+}) {
+  const defaultTagName = getDefaultTagName(type);
+  const rawSize = props.size;
+  const isCurrent = rawSize === "current";
+  const fontSizeStyles = {};
+  if (!isCurrent) {
+    const fontSize$1 = getFontSize(type, props);
+    let base;
+    let tablet;
+    let desktop;
+    if (Array.isArray(fontSize$1)) {
+      [base, tablet, desktop] = fontSize$1;
+    } else if (typeof fontSize$1 === "object") {
+      ({
+        base,
+        tablet,
+        desktop
+      } = fontSize$1);
+    } else {
+      base = fontSize$1;
+    }
+    fontSizeStyles["--cocso-typography-font-size"] = `${fontSize[base]}px`;
+    if (tablet !== undefined) {
+      fontSizeStyles["--cocso-tablet-typography-font-size"] = `${fontSize[tablet]}px`;
+    }
+    if (desktop !== undefined) {
+      fontSizeStyles["--cocso-desktop-typography-font-size"] = `${fontSize[desktop]}px`;
+    }
+  }
+  const style = {
+    ..._style,
+    "--cocso-typography-font-color": color,
+    ...fontSizeStyles,
+    "--cocso-typography-font-weight": fontWeight[weight],
+    "--cocso-typography-line-height": lineHeight[lineHeight$1]
+  };
+  const mergedClassName = cn(styles.typography, className);
+  return useRender({
+    render: renderProp,
+    ref,
+    props: mergeProps({
+      className: mergedClassName,
+      style
+    }, props),
+    defaultTagName
+  });
+}
+const getDefaultTagName = type => match(type).with("heading", () => "h2").otherwise(() => "p");
+const getBodyFontSize = size => match(size).with("large", () => 18).with("medium", () => 16).with("small", () => 14).with("x-small", () => 12).exhaustive();
+const getHeadingFontSize = size => match(size).with("x-large", () => ({
+  base: 28,
+  tablet: 36
+})).with("large", () => ({
+  base: 24,
+  tablet: 32
+})).with("medium", () => ({
+  base: 20,
+  tablet: 28
+})).with("small", () => 16).with("x-small", () => 14).exhaustive();
+const getFontSize = (type, props) => match(type).with("custom", () => props.size ?? 16).with("body", () => getBodyFontSize(props.size ?? "medium")).with("heading", () => getHeadingFontSize(props.size ?? "medium")).otherwise(() => 16);
+
+export { Typography };

package/dist/esm/components/typography/typography.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"typography":"typography-module_typography__krwBf"};
+
+export { styles as default };

package/dist/esm/ecosystem/codegen/generated/alert.mjs

@@ -0,0 +1,10 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function alert(props = {}) {
+  const {
+    variant = "info"
+  } = props;
+  return ["cocso-alert", variant && `cocso-alert--variant-${variant}`].filter(Boolean).join(" ");
+}
+
+export { alert };

package/dist/esm/ecosystem/codegen/generated/avatar.mjs

@@ -0,0 +1,11 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function avatar(props = {}) {
+  const {
+    size = "md",
+    shape = "circle"
+  } = props;
+  return ["cocso-avatar", size && `cocso-avatar--size-${size}`, shape && `cocso-avatar--shape-${shape}`].filter(Boolean).join(" ");
+}
+
+export { avatar };

package/dist/esm/ecosystem/codegen/generated/badge.mjs

@@ -0,0 +1,12 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function badge(props = {}) {
+  const {
+    variant = "secondary",
+    size = "medium",
+    shape = "square"
+  } = props;
+  return ["cocso-badge", variant && `cocso-badge--variant-${variant}`, size && `cocso-badge--size-${size}`, shape && `cocso-badge--shape-${shape}`].filter(Boolean).join(" ");
+}
+
+export { badge };

package/dist/esm/ecosystem/codegen/generated/breadcrumb.mjs

@@ -0,0 +1,10 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function breadcrumb(props = {}) {
+  const {
+    size = "md"
+  } = props;
+  return ["cocso-breadcrumb", size && `cocso-breadcrumb--size-${size}`].filter(Boolean).join(" ");
+}
+
+export { breadcrumb };

package/dist/esm/ecosystem/codegen/generated/button.mjs

@@ -0,0 +1,12 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function button(props = {}) {
+  const {
+    variant = "primary",
+    size = "medium",
+    shape = "square"
+  } = props;
+  return ["cocso-button", variant && `cocso-button--variant-${variant}`, size && `cocso-button--size-${size}`, shape && `cocso-button--shape-${shape}`].filter(Boolean).join(" ");
+}
+
+export { button };

package/dist/esm/ecosystem/codegen/generated/card.mjs

@@ -0,0 +1,11 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function card(props = {}) {
+  const {
+    variant = "elevated",
+    padding = "md"
+  } = props;
+  return ["cocso-card", variant && `cocso-card--variant-${variant}`, padding && `cocso-card--padding-${padding}`].filter(Boolean).join(" ");
+}
+
+export { card };

package/dist/esm/ecosystem/codegen/generated/checkbox.mjs

@@ -0,0 +1,11 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function checkbox(props = {}) {
+  const {
+    size = "medium",
+    status = "off"
+  } = props;
+  return ["cocso-checkbox", size && `cocso-checkbox--size-${size}`, status && `cocso-checkbox--status-${status}`].filter(Boolean).join(" ");
+}
+
+export { checkbox };

package/dist/esm/ecosystem/codegen/generated/input.mjs

@@ -0,0 +1,10 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function input(props = {}) {
+  const {
+    size = "medium"
+  } = props;
+  return ["cocso-input", size && `cocso-input--size-${size}`].filter(Boolean).join(" ");
+}
+
+export { input };

package/dist/esm/ecosystem/codegen/generated/link.mjs

@@ -0,0 +1,10 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function link(props = {}) {
+  const {
+    variant = "inline"
+  } = props;
+  return ["cocso-link", variant && `cocso-link--variant-${variant}`].filter(Boolean).join(" ");
+}
+
+export { link };

package/dist/esm/ecosystem/codegen/generated/progress.mjs

@@ -0,0 +1,11 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function progress(props = {}) {
+  const {
+    variant = "primary",
+    size = "md"
+  } = props;
+  return ["cocso-progress", variant && `cocso-progress--variant-${variant}`, size && `cocso-progress--size-${size}`].filter(Boolean).join(" ");
+}
+
+export { progress };

package/dist/esm/ecosystem/codegen/generated/radio.mjs

@@ -0,0 +1,11 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function radio(props = {}) {
+  const {
+    size = "medium",
+    selected = "false"
+  } = props;
+  return ["cocso-radio", size && `cocso-radio--size-${size}`, selected && `cocso-radio--selected-${selected}`].filter(Boolean).join(" ");
+}
+
+export { radio };

package/dist/esm/ecosystem/codegen/generated/select.mjs

@@ -0,0 +1,10 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function select(props = {}) {
+  const {
+    size = "medium"
+  } = props;
+  return ["cocso-select", size && `cocso-select--size-${size}`].filter(Boolean).join(" ");
+}
+
+export { select };

package/dist/esm/ecosystem/codegen/generated/skeleton.mjs

@@ -0,0 +1,11 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function skeleton(props = {}) {
+  const {
+    variant = "text",
+    animation = "pulse"
+  } = props;
+  return ["cocso-skeleton", variant && `cocso-skeleton--variant-${variant}`, animation && `cocso-skeleton--animation-${animation}`].filter(Boolean).join(" ");
+}
+
+export { skeleton };

package/dist/esm/ecosystem/codegen/generated/spinner-geometry.mjs

@@ -0,0 +1,30 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+const SPINNER_GEOMETRY = {
+  "large": {
+    "blades": 10,
+    "bladeWidth": 2,
+    "bladeHeight": 6,
+    "bladeRadius": 1,
+    "output": 20
+  },
+  "medium": {
+    "blades": 8,
+    "bladeWidth": 2,
+    "bladeHeight": 5,
+    "bladeRadius": 1,
+    "output": 16
+  },
+  "small": {
+    "blades": 6,
+    "bladeWidth": 1.5,
+    "bladeHeight": 4,
+    "bladeRadius": 0.75,
+    "output": 12
+  }
+};
+function getSpinnerGeometry(size) {
+  return SPINNER_GEOMETRY[size];
+}
+
+export { SPINNER_GEOMETRY, getSpinnerGeometry };

package/dist/esm/ecosystem/codegen/generated/spinner.mjs

@@ -0,0 +1,11 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function spinner(props = {}) {
+  const {
+    variant = "primary",
+    size = "medium"
+  } = props;
+  return ["cocso-spinner", variant && `cocso-spinner--variant-${variant}`, size && `cocso-spinner--size-${size}`].filter(Boolean).join(" ");
+}
+
+export { spinner };

package/dist/esm/ecosystem/codegen/generated/stock-quantity-status.mjs

@@ -0,0 +1,10 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function stockQuantityStatus(props = {}) {
+  const {
+    quantity = "sufficient"
+  } = props;
+  return ["cocso-stock-quantity-status", quantity && `cocso-stock-quantity-status--quantity-${quantity}`].filter(Boolean).join(" ");
+}
+
+export { stockQuantityStatus };

package/dist/esm/ecosystem/codegen/generated/switch.mjs

@@ -0,0 +1,12 @@
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function switchStyles(props = {}) {
+  const {
+    variant = "primary",
+    size = "medium",
+    checked = "true"
+  } = props;
+  return ["cocso-switch", variant && `cocso-switch--variant-${variant}`, size && `cocso-switch--size-${size}`, checked && `cocso-switch--checked-${checked}`].filter(Boolean).join(" ");
+}
+
+export { switchStyles };