@tosui/react 0.1.4 → 0.1.5

package/dist/components/Box/borders/borders.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"borders.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"borders.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Box/colors/colors.d.ts

@@ -1,14 +1,12 @@
-import { StyleResult } from '../shared';
+import { ResponsiveValue } from '../../../utils/breakpoints';
+import { StateProps, StyleResult } from '../shared';
 export type ColorValue = "accent-emphasis" | "accent" | "error-emphasis" | "error" | "foreground-inverted-muted" | "foreground-inverted-subtle" | "foreground-inverted" | "foreground-muted" | "foreground-subtle" | "foreground" | "info-emphasis" | "info" | "primary-emphasis" | "primary" | "success-emphasis" | "success" | "warning-emphasis" | "warning";
 export type BackgroundColorValue = "accent-default" | "accent-emphasis" | "accent-subtle" | "background" | "error-default" | "error-emphasis" | "error-subtle" | "foreground" | "info-default" | "info-emphasis" | "info-subtle" | "primary-default" | "primary-emphasis" | "primary-subtle" | "success-default" | "success-emphasis" | "success-subtle" | "surface" | "transparent" | "warning-default" | "warning-emphasis" | "warning-subtle";
 export type BorderColorValue = "accent-emphasis" | "accent" | "border-muted" | "border" | "error-emphasis" | "error" | "info-emphasis" | "info" | "primary-emphasis" | "primary" | "success-emphasis" | "success" | "warning-emphasis" | "warning";
 export type ColorProps = {
-    color?: ColorValue;
-    bg?: BackgroundColorValue;
-    borderColor?: BorderColorValue;
+    color?: ResponsiveValue<ColorValue>;
+    bg?: ResponsiveValue<BackgroundColorValue>;
+    borderColor?: ResponsiveValue<BorderColorValue>;
 };
-export type ColorStateProps = {
-    _hover?: ColorProps;
-};
-export declare function getColorStyles(props: ColorProps & ColorStateProps): StyleResult;
+export declare function getColorStyles(props: ColorProps & StateProps<ColorProps>): StyleResult;
 //# sourceMappingURL=colors.d.ts.map

package/dist/components/Box/colors/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/colors/colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,UAAU,GAClB,iBAAiB,GACjB,QAAQ,GACR,gBAAgB,GAChB,OAAO,GACP,2BAA2B,GAC3B,4BAA4B,GAC5B,qBAAqB,GACrB,kBAAkB,GAClB,mBAAmB,GACnB,YAAY,GACZ,eAAe,GACf,MAAM,GACN,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,SAAS,CAAC;AAEd,MAAM,MAAM,oBAAoB,GAC5B,gBAAgB,GAChB,iBAAiB,GACjB,eAAe,GACf,YAAY,GACZ,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,YAAY,GACZ,cAAc,GACd,eAAe,GACf,aAAa,GACb,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,CAAC;AAErB,MAAM,MAAM,gBAAgB,GACxB,iBAAiB,GACjB,QAAQ,GACR,cAAc,GACd,QAAQ,GACR,gBAAgB,GAChB,OAAO,GACP,eAAe,GACf,MAAM,GACN,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,SAAS,CAAC;AAEd,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,EAAE,CAAC,EAAE,oBAAoB,CAAC;IAC1B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAiDF,wBAAgB,cAAc,CAC5B,KAAK,EAAE,UAAU,GAAG,eAAe,GAClC,WAAW,CAUb"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/colors/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,WAAW,EAEjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,UAAU,GAClB,iBAAiB,GACjB,QAAQ,GACR,gBAAgB,GAChB,OAAO,GACP,2BAA2B,GAC3B,4BAA4B,GAC5B,qBAAqB,GACrB,kBAAkB,GAClB,mBAAmB,GACnB,YAAY,GACZ,eAAe,GACf,MAAM,GACN,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,SAAS,CAAC;AAEd,MAAM,MAAM,oBAAoB,GAC5B,gBAAgB,GAChB,iBAAiB,GACjB,eAAe,GACf,YAAY,GACZ,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,YAAY,GACZ,cAAc,GACd,eAAe,GACf,aAAa,GACb,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,CAAC;AAErB,MAAM,MAAM,gBAAgB,GACxB,iBAAiB,GACjB,QAAQ,GACR,cAAc,GACd,QAAQ,GACR,gBAAgB,GAChB,OAAO,GACP,eAAe,GACf,MAAM,GACN,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,SAAS,CAAC;AAEd,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACpC,EAAE,CAAC,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;CACjD,CAAC;AAkBF,wBAAgB,cAAc,CAC5B,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC,UAAU,CAAC,GACzC,WAAW,CAmBb"}

package/dist/components/Box/colors/colors.js

@@ -1,41 +1,31 @@
-import { STATE_CLASS_SUFFIXES } from "../shared/constants.js";
+import { getEnumResponsiveStyles } from "../shared/responsive.js";
 import styles from "./colors.module.css.js";
 import clsx from "clsx";
-function getColorClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`color-${value}${stateClassSuffix}`] : styles[`color-${value}`];
-}
-function getBgClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`bg-${value}${stateClassSuffix}`] : styles[`bg-${value}`];
-}
-function getBorderColorClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`border-color-${value}${stateClassSuffix}`] : styles[`border-color-${value}`];
-}
 function getColorStylesForState(props, state) {
   if (!props) return { className: "", style: {} };
-  const classes = [];
-  if (props.color) {
-    const cls = getColorClass(props.color, state);
-    if (cls) classes.push(cls);
-  }
-  if (props.bg) {
-    const cls = getBgClass(props.bg, state);
-    if (cls) classes.push(cls);
-  }
-  if (props.borderColor) {
-    const cls = getBorderColorClass(props.borderColor, state);
-    if (cls) classes.push(cls);
-  }
-  return { className: clsx(...classes), style: {} };
+  const colorResult = getEnumResponsiveStyles(styles, "color", props.color, state);
+  const bgResult = getEnumResponsiveStyles(styles, "bg", props.bg, state);
+  const borderColorResult = getEnumResponsiveStyles(styles, "border-color", props.borderColor, state);
+  return {
+    className: clsx(colorResult.className, bgResult.className, borderColorResult.className),
+    style: {}
+  };
 }
 function getColorStyles(props) {
-  const { color, bg, borderColor, _hover } = props;
-  const baseStyles = getColorStylesForState({ color, bg, borderColor }, "base");
+  const { _hover, _focus, _active, _disabled, ...baseProps } = props;
+  const baseStyles = getColorStylesForState(baseProps, "base");
   const hoverStyles = getColorStylesForState(_hover, "hover");
+  const focusStyles = getColorStylesForState(_focus, "focus");
+  const activeStyles = getColorStylesForState(_active, "active");
+  const disabledStyles = getColorStylesForState(_disabled, "disabled");
   return {
-    className: clsx(baseStyles.className, hoverStyles.className),
+    className: clsx(
+      baseStyles.className,
+      hoverStyles.className,
+      focusStyles.className,
+      activeStyles.className,
+      disabledStyles.className
+    ),
     style: {}
   };
 }

package/dist/components/Box/colors/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sources":["../../../../src/components/Box/colors/colors.ts"],"sourcesContent":["import {\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./colors.module.css\";\nimport clsx from \"clsx\";\n\nexport type ColorValue =\n  | \"accent-emphasis\"\n  | \"accent\"\n  | \"error-emphasis\"\n  | \"error\"\n  | \"foreground-inverted-muted\"\n  | \"foreground-inverted-subtle\"\n  | \"foreground-inverted\"\n  | \"foreground-muted\"\n  | \"foreground-subtle\"\n  | \"foreground\"\n  | \"info-emphasis\"\n  | \"info\"\n  | \"primary-emphasis\"\n  | \"primary\"\n  | \"success-emphasis\"\n  | \"success\"\n  | \"warning-emphasis\"\n  | \"warning\";\n\nexport type BackgroundColorValue =\n  | \"accent-default\"\n  | \"accent-emphasis\"\n  | \"accent-subtle\"\n  | \"background\"\n  | \"error-default\"\n  | \"error-emphasis\"\n  | \"error-subtle\"\n  | \"foreground\"\n  | \"info-default\"\n  | \"info-emphasis\"\n  | \"info-subtle\"\n  | \"primary-default\"\n  | \"primary-emphasis\"\n  | \"primary-subtle\"\n  | \"success-default\"\n  | \"success-emphasis\"\n  | \"success-subtle\"\n  | \"surface\"\n  | \"transparent\"\n  | \"warning-default\"\n  | \"warning-emphasis\"\n  | \"warning-subtle\";\n\nexport type BorderColorValue =\n  | \"accent-emphasis\"\n  | \"accent\"\n  | \"border-muted\"\n  | \"border\"\n  | \"error-emphasis\"\n  | \"error\"\n  | \"info-emphasis\"\n  | \"info\"\n  | \"primary-emphasis\"\n  | \"primary\"\n  | \"success-emphasis\"\n  | \"success\"\n  | \"warning-emphasis\"\n  | \"warning\";\n\nexport type ColorProps = {\n  color?: ColorValue;\n  bg?: BackgroundColorValue;\n  borderColor?: BorderColorValue;\n};\n\nexport type ColorStateProps = {\n  _hover?: ColorProps;\n};\n\nfunction getColorClass(value: ColorValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`color-${value}${stateClassSuffix}`]\n    : styles[`color-${value}`];\n}\n\nfunction getBgClass(value: BackgroundColorValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`bg-${value}${stateClassSuffix}`]\n    : styles[`bg-${value}`];\n}\n\nfunction getBorderColorClass(value: BorderColorValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-color-${value}${stateClassSuffix}`]\n    : styles[`border-color-${value}`];\n}\n\nfunction getColorStylesForState(\n  props: ColorProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const classes: string[] = [];\n\n  if (props.color) {\n    const cls = getColorClass(props.color, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (props.bg) {\n    const cls = getBgClass(props.bg, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (props.borderColor) {\n    const cls = getBorderColorClass(props.borderColor, state);\n    if (cls) classes.push(cls);\n  }\n\n  return { className: clsx(...classes), style: {} };\n}\n\nexport function getColorStyles(\n  props: ColorProps & ColorStateProps\n): StyleResult {\n  const { color, bg, borderColor, _hover } = props;\n\n  const baseStyles = getColorStylesForState({ color, bg, borderColor }, \"base\");\n  const hoverStyles = getColorStylesForState(_hover, \"hover\");\n\n  return {\n    className: clsx(baseStyles.className, hoverStyles.className),\n    style: {},\n  };\n}\n"],"names":[],"mappings":";;;AA8EA,SAAS,cAAc,OAAmB,OAAqC;AAC7E,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,SAAS,KAAK,GAAG,gBAAgB,EAAE,IAC1C,OAAO,SAAS,KAAK,EAAE;AAC7B;AAEA,SAAS,WAAW,OAA6B,OAAqC;AACpF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,MAAM,KAAK,GAAG,gBAAgB,EAAE,IACvC,OAAO,MAAM,KAAK,EAAE;AAC1B;AAEA,SAAS,oBAAoB,OAAyB,OAAqC;AACzF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,gBAAgB,KAAK,GAAG,gBAAgB,EAAE,IACjD,OAAO,gBAAgB,KAAK,EAAE;AACpC;AAEA,SAAS,uBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,UAAoB,CAAA;AAE1B,MAAI,MAAM,OAAO;AACf,UAAM,MAAM,cAAc,MAAM,OAAO,KAAK;AAC5C,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,MAAM,IAAI;AACZ,UAAM,MAAM,WAAW,MAAM,IAAI,KAAK;AACtC,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,MAAM,aAAa;AACrB,UAAM,MAAM,oBAAoB,MAAM,aAAa,KAAK;AACxD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,SAAO,EAAE,WAAW,KAAK,GAAG,OAAO,GAAG,OAAO,GAAC;AAChD;AAEO,SAAS,eACd,OACa;AACb,QAAM,EAAE,OAAO,IAAI,aAAa,WAAW;AAE3C,QAAM,aAAa,uBAAuB,EAAE,OAAO,IAAI,YAAA,GAAe,MAAM;AAC5E,QAAM,cAAc,uBAAuB,QAAQ,OAAO;AAE1D,SAAO;AAAA,IACL,WAAW,KAAK,WAAW,WAAW,YAAY,SAAS;AAAA,IAC3D,OAAO,CAAA;AAAA,EAAC;AAEZ;"}
+{"version":3,"file":"colors.js","sources":["../../../../src/components/Box/colors/colors.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  type StateKey,\n  type StateProps,\n  type StyleResult,\n  getEnumResponsiveStyles,\n} from \"../shared\";\nimport styles from \"./colors.module.css\";\nimport clsx from \"clsx\";\n\nexport type ColorValue =\n  | \"accent-emphasis\"\n  | \"accent\"\n  | \"error-emphasis\"\n  | \"error\"\n  | \"foreground-inverted-muted\"\n  | \"foreground-inverted-subtle\"\n  | \"foreground-inverted\"\n  | \"foreground-muted\"\n  | \"foreground-subtle\"\n  | \"foreground\"\n  | \"info-emphasis\"\n  | \"info\"\n  | \"primary-emphasis\"\n  | \"primary\"\n  | \"success-emphasis\"\n  | \"success\"\n  | \"warning-emphasis\"\n  | \"warning\";\n\nexport type BackgroundColorValue =\n  | \"accent-default\"\n  | \"accent-emphasis\"\n  | \"accent-subtle\"\n  | \"background\"\n  | \"error-default\"\n  | \"error-emphasis\"\n  | \"error-subtle\"\n  | \"foreground\"\n  | \"info-default\"\n  | \"info-emphasis\"\n  | \"info-subtle\"\n  | \"primary-default\"\n  | \"primary-emphasis\"\n  | \"primary-subtle\"\n  | \"success-default\"\n  | \"success-emphasis\"\n  | \"success-subtle\"\n  | \"surface\"\n  | \"transparent\"\n  | \"warning-default\"\n  | \"warning-emphasis\"\n  | \"warning-subtle\";\n\nexport type BorderColorValue =\n  | \"accent-emphasis\"\n  | \"accent\"\n  | \"border-muted\"\n  | \"border\"\n  | \"error-emphasis\"\n  | \"error\"\n  | \"info-emphasis\"\n  | \"info\"\n  | \"primary-emphasis\"\n  | \"primary\"\n  | \"success-emphasis\"\n  | \"success\"\n  | \"warning-emphasis\"\n  | \"warning\";\n\nexport type ColorProps = {\n  color?: ResponsiveValue<ColorValue>;\n  bg?: ResponsiveValue<BackgroundColorValue>;\n  borderColor?: ResponsiveValue<BorderColorValue>;\n};\n\nfunction getColorStylesForState(\n  props: ColorProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const colorResult = getEnumResponsiveStyles(styles, \"color\", props.color, state);\n  const bgResult = getEnumResponsiveStyles(styles, \"bg\", props.bg, state);\n  const borderColorResult = getEnumResponsiveStyles(styles, \"border-color\", props.borderColor, state);\n\n  return {\n    className: clsx(colorResult.className, bgResult.className, borderColorResult.className),\n    style: {},\n  };\n}\n\nexport function getColorStyles(\n  props: ColorProps & StateProps<ColorProps>\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getColorStylesForState(baseProps, \"base\");\n  const hoverStyles = getColorStylesForState(_hover, \"hover\");\n  const focusStyles = getColorStylesForState(_focus, \"focus\");\n  const activeStyles = getColorStylesForState(_active, \"active\");\n  const disabledStyles = getColorStylesForState(_disabled, \"disabled\");\n\n  return {\n    className: clsx(\n      baseStyles.className,\n      hoverStyles.className,\n      focusStyles.className,\n      activeStyles.className,\n      disabledStyles.className\n    ),\n    style: {},\n  };\n}\n"],"names":[],"mappings":";;;AA4EA,SAAS,uBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,cAAc,wBAAwB,QAAQ,SAAS,MAAM,OAAO,KAAK;AAC/E,QAAM,WAAW,wBAAwB,QAAQ,MAAM,MAAM,IAAI,KAAK;AACtE,QAAM,oBAAoB,wBAAwB,QAAQ,gBAAgB,MAAM,aAAa,KAAK;AAElG,SAAO;AAAA,IACL,WAAW,KAAK,YAAY,WAAW,SAAS,WAAW,kBAAkB,SAAS;AAAA,IACtF,OAAO,CAAA;AAAA,EAAC;AAEZ;AAEO,SAAS,eACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,uBAAuB,WAAW,MAAM;AAC3D,QAAM,cAAc,uBAAuB,QAAQ,OAAO;AAC1D,QAAM,cAAc,uBAAuB,QAAQ,OAAO;AAC1D,QAAM,eAAe,uBAAuB,SAAS,QAAQ;AAC7D,QAAM,iBAAiB,uBAAuB,WAAW,UAAU;AAEnE,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO,CAAA;AAAA,EAAC;AAEZ;"}