@tosui/react 0.1.0 → 0.1.2

package/dist/components/Box/margin/margin.js

@@ -0,0 +1,96 @@
+import { STATE_SUFFIXES, STATE_CLASS_SUFFIXES, RESPONSIVE_KEYS } from "../shared/constants.js";
+import { getRawValue } from "../shared/spacing.js";
+import styles from "./margin.module.css.js";
+import clsx from "clsx";
+function getSpacingProps(key, value, state = "base") {
+  const result = { className: "", style: {} };
+  if (value === void 0) return result;
+  const stateSuffix = STATE_SUFFIXES[state];
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  if (typeof value !== "object") {
+    const rawValue = getRawValue(value);
+    if (rawValue !== void 0) {
+      const className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
+      result.className = className || "";
+      result.style[`--t-${key}${stateSuffix}`] = rawValue;
+    }
+    return result;
+  }
+  for (const responsiveKey of RESPONSIVE_KEYS) {
+    const rawValue = getRawValue(value[responsiveKey]);
+    if (rawValue === void 0) continue;
+    let className;
+    let varName;
+    if (responsiveKey === "base") {
+      className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
+      varName = `--t-${key}${stateSuffix}`;
+    } else {
+      className = stateClassSuffix ? styles[`${key}_${responsiveKey}${stateClassSuffix}`] : styles[`${key}_${responsiveKey}`];
+      varName = `--t-${key}_${responsiveKey}${stateSuffix}`;
+    }
+    if (className) {
+      result.className = clsx(result.className, className);
+    }
+    result.style[varName] = rawValue;
+  }
+  return result;
+}
+function resolveMarginValue(key, props) {
+  const shorthandMap = {
+    mt: "my",
+    mb: "my",
+    mr: "mx",
+    ml: "mx"
+  };
+  return props[key] ?? props[shorthandMap[key]] ?? props.m;
+}
+function getMarginStylesForState(props, state) {
+  const result = { className: "", style: {} };
+  if (!props) return result;
+  const marginTop = getSpacingProps("mt", resolveMarginValue("mt", props), state);
+  const marginRight = getSpacingProps("mr", resolveMarginValue("mr", props), state);
+  const marginBottom = getSpacingProps("mb", resolveMarginValue("mb", props), state);
+  const marginLeft = getSpacingProps("ml", resolveMarginValue("ml", props), state);
+  return {
+    className: clsx(
+      marginTop.className,
+      marginRight.className,
+      marginBottom.className,
+      marginLeft.className
+    ),
+    style: {
+      ...marginTop.style,
+      ...marginRight.style,
+      ...marginBottom.style,
+      ...marginLeft.style
+    }
+  };
+}
+function getMarginStyles(props) {
+  const { _hover, _focus, _active, _disabled, ...baseProps } = props;
+  const baseStyles = getMarginStylesForState(baseProps, "base");
+  const hoverStyles = getMarginStylesForState(_hover, "hover");
+  const focusStyles = getMarginStylesForState(_focus, "focus");
+  const activeStyles = getMarginStylesForState(_active, "active");
+  const disabledStyles = getMarginStylesForState(_disabled, "disabled");
+  return {
+    className: clsx(
+      baseStyles.className,
+      hoverStyles.className,
+      focusStyles.className,
+      activeStyles.className,
+      disabledStyles.className
+    ),
+    style: {
+      ...baseStyles.style,
+      ...hoverStyles.style,
+      ...focusStyles.style,
+      ...activeStyles.style,
+      ...disabledStyles.style
+    }
+  };
+}
+export {
+  getMarginStyles
+};
+//# sourceMappingURL=margin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"margin.js","sources":["../../../../src/components/Box/margin/margin.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  RESPONSIVE_KEYS,\n  STATE_SUFFIXES,\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n  getRawValue,\n} from \"../shared\";\nimport styles from \"./margin.module.css\";\nimport clsx from \"clsx\";\n\ntype SpacingValue = string | number;\ntype MarginKey = \"mt\" | \"mr\" | \"mb\" | \"ml\";\ntype MarginShorthandKey = \"m\" | \"mx\" | \"my\";\n\nexport type MarginProps = {\n  m?: ResponsiveValue<SpacingValue>;\n  mt?: ResponsiveValue<SpacingValue>;\n  mr?: ResponsiveValue<SpacingValue>;\n  mb?: ResponsiveValue<SpacingValue>;\n  ml?: ResponsiveValue<SpacingValue>;\n  mx?: ResponsiveValue<SpacingValue>;\n  my?: ResponsiveValue<SpacingValue>;\n};\n\nexport type MarginStateProps = {\n  _hover?: MarginProps;\n  _focus?: MarginProps;\n  _active?: MarginProps;\n  _disabled?: MarginProps;\n};\n\nfunction getSpacingProps(\n  key: MarginKey,\n  value: ResponsiveValue<SpacingValue> | undefined,\n  state: StateKey = \"base\"\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (value === undefined) return result;\n\n  const stateSuffix = STATE_SUFFIXES[state];\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  if (typeof value !== \"object\") {\n    const rawValue = getRawValue(value);\n    if (rawValue !== undefined) {\n      const className = stateClassSuffix\n        ? styles[`${key}${stateClassSuffix}`]\n        : styles[key];\n      result.className = className || \"\";\n      result.style[`--t-${key}${stateSuffix}`] = rawValue;\n    }\n    return result;\n  }\n\n  for (const responsiveKey of RESPONSIVE_KEYS) {\n    const rawValue = getRawValue(value[responsiveKey]);\n    if (rawValue === undefined) continue;\n\n    let className: string | undefined;\n    let varName: string;\n\n    if (responsiveKey === \"base\") {\n      className = stateClassSuffix\n        ? styles[`${key}${stateClassSuffix}`]\n        : styles[key];\n      varName = `--t-${key}${stateSuffix}`;\n    } else {\n      className = stateClassSuffix\n        ? styles[`${key}_${responsiveKey}${stateClassSuffix}`]\n        : styles[`${key}_${responsiveKey}`];\n      varName = `--t-${key}_${responsiveKey}${stateSuffix}`;\n    }\n\n    if (className) {\n      result.className = clsx(result.className, className);\n    }\n    result.style[varName] = rawValue;\n  }\n\n  return result;\n}\n\nfunction resolveMarginValue(\n  key: MarginKey,\n  props: MarginProps\n): ResponsiveValue<SpacingValue> | undefined {\n  const shorthandMap: Record<MarginKey, MarginShorthandKey> = {\n    mt: \"my\",\n    mb: \"my\",\n    mr: \"mx\",\n    ml: \"mx\",\n  };\n  return props[key] ?? props[shorthandMap[key]] ?? props.m;\n}\n\nfunction getMarginStylesForState(\n  props: MarginProps | undefined,\n  state: StateKey\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (!props) return result;\n\n  const marginTop = getSpacingProps(\"mt\", resolveMarginValue(\"mt\", props), state);\n  const marginRight = getSpacingProps(\"mr\", resolveMarginValue(\"mr\", props), state);\n  const marginBottom = getSpacingProps(\"mb\", resolveMarginValue(\"mb\", props), state);\n  const marginLeft = getSpacingProps(\"ml\", resolveMarginValue(\"ml\", props), state);\n\n  return {\n    className: clsx(\n      marginTop.className,\n      marginRight.className,\n      marginBottom.className,\n      marginLeft.className\n    ),\n    style: {\n      ...marginTop.style,\n      ...marginRight.style,\n      ...marginBottom.style,\n      ...marginLeft.style,\n    },\n  };\n}\n\nexport function getMarginStyles(\n  props: MarginProps & MarginStateProps\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getMarginStylesForState(baseProps, \"base\");\n  const hoverStyles = getMarginStylesForState(_hover, \"hover\");\n  const focusStyles = getMarginStylesForState(_focus, \"focus\");\n  const activeStyles = getMarginStylesForState(_active, \"active\");\n  const disabledStyles = getMarginStylesForState(_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      ...baseStyles.style,\n      ...hoverStyles.style,\n      ...focusStyles.style,\n      ...activeStyles.style,\n      ...disabledStyles.style,\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Box/margin/margin.module.css

@@ -0,0 +1,187 @@
+/* margin-top */
+._mt_17rt1_2 { margin-top: var(--t-mt); }
+._mt\:h_17rt1_3:hover { margin-top: var(--t-mt-h); }
+._mt\:f_17rt1_4:focus { margin-top: var(--t-mt-f); }
+._mt\:a_17rt1_5:active { margin-top: var(--t-mt-a); }
+._mt\:d_17rt1_6:disabled { margin-top: var(--t-mt-d); }
+
+@media (min-width: 640px) {
+  ._mt_sm_17rt1_9 { margin-top: var(--t-mt_sm); }
+  ._mt_sm\:h_17rt1_10:hover { margin-top: var(--t-mt_sm-h); }
+  ._mt_sm\:f_17rt1_11:focus { margin-top: var(--t-mt_sm-f); }
+  ._mt_sm\:a_17rt1_12:active { margin-top: var(--t-mt_sm-a); }
+  ._mt_sm\:d_17rt1_13:disabled { margin-top: var(--t-mt_sm-d); }
+}
+
+@media (min-width: 768px) {
+  ._mt_md_17rt1_17 { margin-top: var(--t-mt_md); }
+  ._mt_md\:h_17rt1_18:hover { margin-top: var(--t-mt_md-h); }
+  ._mt_md\:f_17rt1_19:focus { margin-top: var(--t-mt_md-f); }
+  ._mt_md\:a_17rt1_20:active { margin-top: var(--t-mt_md-a); }
+  ._mt_md\:d_17rt1_21:disabled { margin-top: var(--t-mt_md-d); }
+}
+
+@media (min-width: 1024px) {
+  ._mt_lg_17rt1_25 { margin-top: var(--t-mt_lg); }
+  ._mt_lg\:h_17rt1_26:hover { margin-top: var(--t-mt_lg-h); }
+  ._mt_lg\:f_17rt1_27:focus { margin-top: var(--t-mt_lg-f); }
+  ._mt_lg\:a_17rt1_28:active { margin-top: var(--t-mt_lg-a); }
+  ._mt_lg\:d_17rt1_29:disabled { margin-top: var(--t-mt_lg-d); }
+}
+
+@media (min-width: 1280px) {
+  ._mt_xl_17rt1_33 { margin-top: var(--t-mt_xl); }
+  ._mt_xl\:h_17rt1_34:hover { margin-top: var(--t-mt_xl-h); }
+  ._mt_xl\:f_17rt1_35:focus { margin-top: var(--t-mt_xl-f); }
+  ._mt_xl\:a_17rt1_36:active { margin-top: var(--t-mt_xl-a); }
+  ._mt_xl\:d_17rt1_37:disabled { margin-top: var(--t-mt_xl-d); }
+}
+
+@media (min-width: 1536px) {
+  ._mt_2xl_17rt1_41 { margin-top: var(--t-mt_2xl); }
+  ._mt_2xl\:h_17rt1_42:hover { margin-top: var(--t-mt_2xl-h); }
+  ._mt_2xl\:f_17rt1_43:focus { margin-top: var(--t-mt_2xl-f); }
+  ._mt_2xl\:a_17rt1_44:active { margin-top: var(--t-mt_2xl-a); }
+  ._mt_2xl\:d_17rt1_45:disabled { margin-top: var(--t-mt_2xl-d); }
+}
+
+/* margin-right */
+._mr_17rt1_49 { margin-right: var(--t-mr); }
+._mr\:h_17rt1_50:hover { margin-right: var(--t-mr-h); }
+._mr\:f_17rt1_51:focus { margin-right: var(--t-mr-f); }
+._mr\:a_17rt1_52:active { margin-right: var(--t-mr-a); }
+._mr\:d_17rt1_53:disabled { margin-right: var(--t-mr-d); }
+
+@media (min-width: 640px) {
+  ._mr_sm_17rt1_56 { margin-right: var(--t-mr_sm); }
+  ._mr_sm\:h_17rt1_57:hover { margin-right: var(--t-mr_sm-h); }
+  ._mr_sm\:f_17rt1_58:focus { margin-right: var(--t-mr_sm-f); }
+  ._mr_sm\:a_17rt1_59:active { margin-right: var(--t-mr_sm-a); }
+  ._mr_sm\:d_17rt1_60:disabled { margin-right: var(--t-mr_sm-d); }
+}
+
+@media (min-width: 768px) {
+  ._mr_md_17rt1_64 { margin-right: var(--t-mr_md); }
+  ._mr_md\:h_17rt1_65:hover { margin-right: var(--t-mr_md-h); }
+  ._mr_md\:f_17rt1_66:focus { margin-right: var(--t-mr_md-f); }
+  ._mr_md\:a_17rt1_67:active { margin-right: var(--t-mr_md-a); }
+  ._mr_md\:d_17rt1_68:disabled { margin-right: var(--t-mr_md-d); }
+}
+
+@media (min-width: 1024px) {
+  ._mr_lg_17rt1_72 { margin-right: var(--t-mr_lg); }
+  ._mr_lg\:h_17rt1_73:hover { margin-right: var(--t-mr_lg-h); }
+  ._mr_lg\:f_17rt1_74:focus { margin-right: var(--t-mr_lg-f); }
+  ._mr_lg\:a_17rt1_75:active { margin-right: var(--t-mr_lg-a); }
+  ._mr_lg\:d_17rt1_76:disabled { margin-right: var(--t-mr_lg-d); }
+}
+
+@media (min-width: 1280px) {
+  ._mr_xl_17rt1_80 { margin-right: var(--t-mr_xl); }
+  ._mr_xl\:h_17rt1_81:hover { margin-right: var(--t-mr_xl-h); }
+  ._mr_xl\:f_17rt1_82:focus { margin-right: var(--t-mr_xl-f); }
+  ._mr_xl\:a_17rt1_83:active { margin-right: var(--t-mr_xl-a); }
+  ._mr_xl\:d_17rt1_84:disabled { margin-right: var(--t-mr_xl-d); }
+}
+
+@media (min-width: 1536px) {
+  ._mr_2xl_17rt1_88 { margin-right: var(--t-mr_2xl); }
+  ._mr_2xl\:h_17rt1_89:hover { margin-right: var(--t-mr_2xl-h); }
+  ._mr_2xl\:f_17rt1_90:focus { margin-right: var(--t-mr_2xl-f); }
+  ._mr_2xl\:a_17rt1_91:active { margin-right: var(--t-mr_2xl-a); }
+  ._mr_2xl\:d_17rt1_92:disabled { margin-right: var(--t-mr_2xl-d); }
+}
+
+/* margin-bottom */
+._mb_17rt1_96 { margin-bottom: var(--t-mb); }
+._mb\:h_17rt1_97:hover { margin-bottom: var(--t-mb-h); }
+._mb\:f_17rt1_98:focus { margin-bottom: var(--t-mb-f); }
+._mb\:a_17rt1_99:active { margin-bottom: var(--t-mb-a); }
+._mb\:d_17rt1_100:disabled { margin-bottom: var(--t-mb-d); }
+
+@media (min-width: 640px) {
+  ._mb_sm_17rt1_103 { margin-bottom: var(--t-mb_sm); }
+  ._mb_sm\:h_17rt1_104:hover { margin-bottom: var(--t-mb_sm-h); }
+  ._mb_sm\:f_17rt1_105:focus { margin-bottom: var(--t-mb_sm-f); }
+  ._mb_sm\:a_17rt1_106:active { margin-bottom: var(--t-mb_sm-a); }
+  ._mb_sm\:d_17rt1_107:disabled { margin-bottom: var(--t-mb_sm-d); }
+}
+
+@media (min-width: 768px) {
+  ._mb_md_17rt1_111 { margin-bottom: var(--t-mb_md); }
+  ._mb_md\:h_17rt1_112:hover { margin-bottom: var(--t-mb_md-h); }
+  ._mb_md\:f_17rt1_113:focus { margin-bottom: var(--t-mb_md-f); }
+  ._mb_md\:a_17rt1_114:active { margin-bottom: var(--t-mb_md-a); }
+  ._mb_md\:d_17rt1_115:disabled { margin-bottom: var(--t-mb_md-d); }
+}
+
+@media (min-width: 1024px) {
+  ._mb_lg_17rt1_119 { margin-bottom: var(--t-mb_lg); }
+  ._mb_lg\:h_17rt1_120:hover { margin-bottom: var(--t-mb_lg-h); }
+  ._mb_lg\:f_17rt1_121:focus { margin-bottom: var(--t-mb_lg-f); }
+  ._mb_lg\:a_17rt1_122:active { margin-bottom: var(--t-mb_lg-a); }
+  ._mb_lg\:d_17rt1_123:disabled { margin-bottom: var(--t-mb_lg-d); }
+}
+
+@media (min-width: 1280px) {
+  ._mb_xl_17rt1_127 { margin-bottom: var(--t-mb_xl); }
+  ._mb_xl\:h_17rt1_128:hover { margin-bottom: var(--t-mb_xl-h); }
+  ._mb_xl\:f_17rt1_129:focus { margin-bottom: var(--t-mb_xl-f); }
+  ._mb_xl\:a_17rt1_130:active { margin-bottom: var(--t-mb_xl-a); }
+  ._mb_xl\:d_17rt1_131:disabled { margin-bottom: var(--t-mb_xl-d); }
+}
+
+@media (min-width: 1536px) {
+  ._mb_2xl_17rt1_135 { margin-bottom: var(--t-mb_2xl); }
+  ._mb_2xl\:h_17rt1_136:hover { margin-bottom: var(--t-mb_2xl-h); }
+  ._mb_2xl\:f_17rt1_137:focus { margin-bottom: var(--t-mb_2xl-f); }
+  ._mb_2xl\:a_17rt1_138:active { margin-bottom: var(--t-mb_2xl-a); }
+  ._mb_2xl\:d_17rt1_139:disabled { margin-bottom: var(--t-mb_2xl-d); }
+}
+
+/* margin-left */
+._ml_17rt1_143 { margin-left: var(--t-ml); }
+._ml\:h_17rt1_144:hover { margin-left: var(--t-ml-h); }
+._ml\:f_17rt1_145:focus { margin-left: var(--t-ml-f); }
+._ml\:a_17rt1_146:active { margin-left: var(--t-ml-a); }
+._ml\:d_17rt1_147:disabled { margin-left: var(--t-ml-d); }
+
+@media (min-width: 640px) {
+  ._ml_sm_17rt1_150 { margin-left: var(--t-ml_sm); }
+  ._ml_sm\:h_17rt1_151:hover { margin-left: var(--t-ml_sm-h); }
+  ._ml_sm\:f_17rt1_152:focus { margin-left: var(--t-ml_sm-f); }
+  ._ml_sm\:a_17rt1_153:active { margin-left: var(--t-ml_sm-a); }
+  ._ml_sm\:d_17rt1_154:disabled { margin-left: var(--t-ml_sm-d); }
+}
+
+@media (min-width: 768px) {
+  ._ml_md_17rt1_158 { margin-left: var(--t-ml_md); }
+  ._ml_md\:h_17rt1_159:hover { margin-left: var(--t-ml_md-h); }
+  ._ml_md\:f_17rt1_160:focus { margin-left: var(--t-ml_md-f); }
+  ._ml_md\:a_17rt1_161:active { margin-left: var(--t-ml_md-a); }
+  ._ml_md\:d_17rt1_162:disabled { margin-left: var(--t-ml_md-d); }
+}
+
+@media (min-width: 1024px) {
+  ._ml_lg_17rt1_166 { margin-left: var(--t-ml_lg); }
+  ._ml_lg\:h_17rt1_167:hover { margin-left: var(--t-ml_lg-h); }
+  ._ml_lg\:f_17rt1_168:focus { margin-left: var(--t-ml_lg-f); }
+  ._ml_lg\:a_17rt1_169:active { margin-left: var(--t-ml_lg-a); }
+  ._ml_lg\:d_17rt1_170:disabled { margin-left: var(--t-ml_lg-d); }
+}
+
+@media (min-width: 1280px) {
+  ._ml_xl_17rt1_174 { margin-left: var(--t-ml_xl); }
+  ._ml_xl\:h_17rt1_175:hover { margin-left: var(--t-ml_xl-h); }
+  ._ml_xl\:f_17rt1_176:focus { margin-left: var(--t-ml_xl-f); }
+  ._ml_xl\:a_17rt1_177:active { margin-left: var(--t-ml_xl-a); }
+  ._ml_xl\:d_17rt1_178:disabled { margin-left: var(--t-ml_xl-d); }
+}
+
+@media (min-width: 1536px) {
+  ._ml_2xl_17rt1_182 { margin-left: var(--t-ml_2xl); }
+  ._ml_2xl\:h_17rt1_183:hover { margin-left: var(--t-ml_2xl-h); }
+  ._ml_2xl\:f_17rt1_184:focus { margin-left: var(--t-ml_2xl-f); }
+  ._ml_2xl\:a_17rt1_185:active { margin-left: var(--t-ml_2xl-a); }
+  ._ml_2xl\:d_17rt1_186:disabled { margin-left: var(--t-ml_2xl-d); }
+}

package/dist/components/Box/margin/margin.module.css.js

@@ -0,0 +1,174 @@
+const mt = "_mt_17rt1_2";
+const mt_sm = "_mt_sm_17rt1_9";
+const mt_md = "_mt_md_17rt1_17";
+const mt_lg = "_mt_lg_17rt1_25";
+const mt_xl = "_mt_xl_17rt1_33";
+const mt_2xl = "_mt_2xl_17rt1_41";
+const mr = "_mr_17rt1_49";
+const mr_sm = "_mr_sm_17rt1_56";
+const mr_md = "_mr_md_17rt1_64";
+const mr_lg = "_mr_lg_17rt1_72";
+const mr_xl = "_mr_xl_17rt1_80";
+const mr_2xl = "_mr_2xl_17rt1_88";
+const mb = "_mb_17rt1_96";
+const mb_sm = "_mb_sm_17rt1_103";
+const mb_md = "_mb_md_17rt1_111";
+const mb_lg = "_mb_lg_17rt1_119";
+const mb_xl = "_mb_xl_17rt1_127";
+const mb_2xl = "_mb_2xl_17rt1_135";
+const ml = "_ml_17rt1_143";
+const ml_sm = "_ml_sm_17rt1_150";
+const ml_md = "_ml_md_17rt1_158";
+const ml_lg = "_ml_lg_17rt1_166";
+const ml_xl = "_ml_xl_17rt1_174";
+const ml_2xl = "_ml_2xl_17rt1_182";
+const styles = {
+  mt,
+  "mt:h": "_mt:h_17rt1_3",
+  "mt:f": "_mt:f_17rt1_4",
+  "mt:a": "_mt:a_17rt1_5",
+  "mt:d": "_mt:d_17rt1_6",
+  mt_sm,
+  "mt_sm:h": "_mt_sm:h_17rt1_10",
+  "mt_sm:f": "_mt_sm:f_17rt1_11",
+  "mt_sm:a": "_mt_sm:a_17rt1_12",
+  "mt_sm:d": "_mt_sm:d_17rt1_13",
+  mt_md,
+  "mt_md:h": "_mt_md:h_17rt1_18",
+  "mt_md:f": "_mt_md:f_17rt1_19",
+  "mt_md:a": "_mt_md:a_17rt1_20",
+  "mt_md:d": "_mt_md:d_17rt1_21",
+  mt_lg,
+  "mt_lg:h": "_mt_lg:h_17rt1_26",
+  "mt_lg:f": "_mt_lg:f_17rt1_27",
+  "mt_lg:a": "_mt_lg:a_17rt1_28",
+  "mt_lg:d": "_mt_lg:d_17rt1_29",
+  mt_xl,
+  "mt_xl:h": "_mt_xl:h_17rt1_34",
+  "mt_xl:f": "_mt_xl:f_17rt1_35",
+  "mt_xl:a": "_mt_xl:a_17rt1_36",
+  "mt_xl:d": "_mt_xl:d_17rt1_37",
+  mt_2xl,
+  "mt_2xl:h": "_mt_2xl:h_17rt1_42",
+  "mt_2xl:f": "_mt_2xl:f_17rt1_43",
+  "mt_2xl:a": "_mt_2xl:a_17rt1_44",
+  "mt_2xl:d": "_mt_2xl:d_17rt1_45",
+  mr,
+  "mr:h": "_mr:h_17rt1_50",
+  "mr:f": "_mr:f_17rt1_51",
+  "mr:a": "_mr:a_17rt1_52",
+  "mr:d": "_mr:d_17rt1_53",
+  mr_sm,
+  "mr_sm:h": "_mr_sm:h_17rt1_57",
+  "mr_sm:f": "_mr_sm:f_17rt1_58",
+  "mr_sm:a": "_mr_sm:a_17rt1_59",
+  "mr_sm:d": "_mr_sm:d_17rt1_60",
+  mr_md,
+  "mr_md:h": "_mr_md:h_17rt1_65",
+  "mr_md:f": "_mr_md:f_17rt1_66",
+  "mr_md:a": "_mr_md:a_17rt1_67",
+  "mr_md:d": "_mr_md:d_17rt1_68",
+  mr_lg,
+  "mr_lg:h": "_mr_lg:h_17rt1_73",
+  "mr_lg:f": "_mr_lg:f_17rt1_74",
+  "mr_lg:a": "_mr_lg:a_17rt1_75",
+  "mr_lg:d": "_mr_lg:d_17rt1_76",
+  mr_xl,
+  "mr_xl:h": "_mr_xl:h_17rt1_81",
+  "mr_xl:f": "_mr_xl:f_17rt1_82",
+  "mr_xl:a": "_mr_xl:a_17rt1_83",
+  "mr_xl:d": "_mr_xl:d_17rt1_84",
+  mr_2xl,
+  "mr_2xl:h": "_mr_2xl:h_17rt1_89",
+  "mr_2xl:f": "_mr_2xl:f_17rt1_90",
+  "mr_2xl:a": "_mr_2xl:a_17rt1_91",
+  "mr_2xl:d": "_mr_2xl:d_17rt1_92",
+  mb,
+  "mb:h": "_mb:h_17rt1_97",
+  "mb:f": "_mb:f_17rt1_98",
+  "mb:a": "_mb:a_17rt1_99",
+  "mb:d": "_mb:d_17rt1_100",
+  mb_sm,
+  "mb_sm:h": "_mb_sm:h_17rt1_104",
+  "mb_sm:f": "_mb_sm:f_17rt1_105",
+  "mb_sm:a": "_mb_sm:a_17rt1_106",
+  "mb_sm:d": "_mb_sm:d_17rt1_107",
+  mb_md,
+  "mb_md:h": "_mb_md:h_17rt1_112",
+  "mb_md:f": "_mb_md:f_17rt1_113",
+  "mb_md:a": "_mb_md:a_17rt1_114",
+  "mb_md:d": "_mb_md:d_17rt1_115",
+  mb_lg,
+  "mb_lg:h": "_mb_lg:h_17rt1_120",
+  "mb_lg:f": "_mb_lg:f_17rt1_121",
+  "mb_lg:a": "_mb_lg:a_17rt1_122",
+  "mb_lg:d": "_mb_lg:d_17rt1_123",
+  mb_xl,
+  "mb_xl:h": "_mb_xl:h_17rt1_128",
+  "mb_xl:f": "_mb_xl:f_17rt1_129",
+  "mb_xl:a": "_mb_xl:a_17rt1_130",
+  "mb_xl:d": "_mb_xl:d_17rt1_131",
+  mb_2xl,
+  "mb_2xl:h": "_mb_2xl:h_17rt1_136",
+  "mb_2xl:f": "_mb_2xl:f_17rt1_137",
+  "mb_2xl:a": "_mb_2xl:a_17rt1_138",
+  "mb_2xl:d": "_mb_2xl:d_17rt1_139",
+  ml,
+  "ml:h": "_ml:h_17rt1_144",
+  "ml:f": "_ml:f_17rt1_145",
+  "ml:a": "_ml:a_17rt1_146",
+  "ml:d": "_ml:d_17rt1_147",
+  ml_sm,
+  "ml_sm:h": "_ml_sm:h_17rt1_151",
+  "ml_sm:f": "_ml_sm:f_17rt1_152",
+  "ml_sm:a": "_ml_sm:a_17rt1_153",
+  "ml_sm:d": "_ml_sm:d_17rt1_154",
+  ml_md,
+  "ml_md:h": "_ml_md:h_17rt1_159",
+  "ml_md:f": "_ml_md:f_17rt1_160",
+  "ml_md:a": "_ml_md:a_17rt1_161",
+  "ml_md:d": "_ml_md:d_17rt1_162",
+  ml_lg,
+  "ml_lg:h": "_ml_lg:h_17rt1_167",
+  "ml_lg:f": "_ml_lg:f_17rt1_168",
+  "ml_lg:a": "_ml_lg:a_17rt1_169",
+  "ml_lg:d": "_ml_lg:d_17rt1_170",
+  ml_xl,
+  "ml_xl:h": "_ml_xl:h_17rt1_175",
+  "ml_xl:f": "_ml_xl:f_17rt1_176",
+  "ml_xl:a": "_ml_xl:a_17rt1_177",
+  "ml_xl:d": "_ml_xl:d_17rt1_178",
+  ml_2xl,
+  "ml_2xl:h": "_ml_2xl:h_17rt1_183",
+  "ml_2xl:f": "_ml_2xl:f_17rt1_184",
+  "ml_2xl:a": "_ml_2xl:a_17rt1_185",
+  "ml_2xl:d": "_ml_2xl:d_17rt1_186"
+};
+export {
+  styles as default,
+  mb,
+  mb_2xl,
+  mb_lg,
+  mb_md,
+  mb_sm,
+  mb_xl,
+  ml,
+  ml_2xl,
+  ml_lg,
+  ml_md,
+  ml_sm,
+  ml_xl,
+  mr,
+  mr_2xl,
+  mr_lg,
+  mr_md,
+  mr_sm,
+  mr_xl,
+  mt,
+  mt_2xl,
+  mt_lg,
+  mt_md,
+  mt_sm,
+  mt_xl
+};
+//# sourceMappingURL=margin.module.css.js.map

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

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

package/dist/components/Box/opacity/opacity.js

@@ -0,0 +1,52 @@
+import { RESPONSIVE_KEYS, STATE_CLASS_SUFFIXES } from "../shared/constants.js";
+import styles from "./opacity.module.css.js";
+import clsx from "clsx";
+function getOpacityClass(value, responsiveKey, state) {
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  if (responsiveKey === "base") {
+    return stateClassSuffix ? styles[`${value}${stateClassSuffix}`] : styles[value];
+  }
+  return stateClassSuffix ? styles[`${value}_${responsiveKey}${stateClassSuffix}`] : styles[`${value}_${responsiveKey}`];
+}
+function getOpacityStylesForValue(value, state) {
+  const result = { className: "", style: {} };
+  if (value === void 0) return result;
+  if (typeof value === "string") {
+    const className = getOpacityClass(value, "base", state);
+    if (className) {
+      result.className = className;
+    }
+    return result;
+  }
+  for (const responsiveKey of RESPONSIVE_KEYS) {
+    const opacityValue = value[responsiveKey];
+    if (opacityValue === void 0) continue;
+    const className = getOpacityClass(opacityValue, responsiveKey, state);
+    if (className) {
+      result.className = clsx(result.className, className);
+    }
+  }
+  return result;
+}
+function getOpacityStyles(props) {
+  const { opacity, _hover, _focus, _active, _disabled } = props;
+  const baseStyles = getOpacityStylesForValue(opacity, "base");
+  const hoverStyles = getOpacityStylesForValue(_hover?.opacity, "hover");
+  const focusStyles = getOpacityStylesForValue(_focus?.opacity, "focus");
+  const activeStyles = getOpacityStylesForValue(_active?.opacity, "active");
+  const disabledStyles = getOpacityStylesForValue(_disabled?.opacity, "disabled");
+  return {
+    className: clsx(
+      baseStyles.className,
+      hoverStyles.className,
+      focusStyles.className,
+      activeStyles.className,
+      disabledStyles.className
+    ),
+    style: {}
+  };
+}
+export {
+  getOpacityStyles
+};
+//# sourceMappingURL=opacity.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"opacity.js","sources":["../../../../src/components/Box/opacity/opacity.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  RESPONSIVE_KEYS,\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./opacity.module.css\";\nimport clsx from \"clsx\";\n\nexport type OpacityValue = \"invisible\" | \"faint\" | \"semi\" | \"full\";\n\nexport type OpacityProps = {\n  opacity?: ResponsiveValue<OpacityValue>;\n};\n\nexport type OpacityStateProps = {\n  _hover?: OpacityProps;\n  _focus?: OpacityProps;\n  _active?: OpacityProps;\n  _disabled?: OpacityProps;\n};\n\nfunction getOpacityClass(\n  value: OpacityValue,\n  responsiveKey: (typeof RESPONSIVE_KEYS)[number],\n  state: StateKey\n): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  if (responsiveKey === \"base\") {\n    return stateClassSuffix\n      ? styles[`${value}${stateClassSuffix}`]\n      : styles[value];\n  }\n\n  return stateClassSuffix\n    ? styles[`${value}_${responsiveKey}${stateClassSuffix}`]\n    : styles[`${value}_${responsiveKey}`];\n}\n\nfunction getOpacityStylesForValue(\n  value: ResponsiveValue<OpacityValue> | undefined,\n  state: StateKey\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (value === undefined) return result;\n\n  if (typeof value === \"string\") {\n    const className = getOpacityClass(value, \"base\", state);\n    if (className) {\n      result.className = className;\n    }\n    return result;\n  }\n\n  for (const responsiveKey of RESPONSIVE_KEYS) {\n    const opacityValue = value[responsiveKey];\n    if (opacityValue === undefined) continue;\n\n    const className = getOpacityClass(opacityValue, responsiveKey, state);\n    if (className) {\n      result.className = clsx(result.className, className);\n    }\n  }\n\n  return result;\n}\n\nexport function getOpacityStyles(\n  props: OpacityProps & OpacityStateProps\n): StyleResult {\n  const { opacity, _hover, _focus, _active, _disabled } = props;\n\n  const baseStyles = getOpacityStylesForValue(opacity, \"base\");\n  const hoverStyles = getOpacityStylesForValue(_hover?.opacity, \"hover\");\n  const focusStyles = getOpacityStylesForValue(_focus?.opacity, \"focus\");\n  const activeStyles = getOpacityStylesForValue(_active?.opacity, \"active\");\n  const disabledStyles = getOpacityStylesForValue(_disabled?.opacity, \"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":";;;AAuBA,SAAS,gBACP,OACA,eACA,OACoB;AACpB,QAAM,mBAAmB,qBAAqB,KAAK;AAEnD,MAAI,kBAAkB,QAAQ;AAC5B,WAAO,mBACH,OAAO,GAAG,KAAK,GAAG,gBAAgB,EAAE,IACpC,OAAO,KAAK;AAAA,EAClB;AAEA,SAAO,mBACH,OAAO,GAAG,KAAK,IAAI,aAAa,GAAG,gBAAgB,EAAE,IACrD,OAAO,GAAG,KAAK,IAAI,aAAa,EAAE;AACxC;AAEA,SAAS,yBACP,OACA,OACa;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AAErD,MAAI,UAAU,OAAW,QAAO;AAEhC,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,YAAY,gBAAgB,OAAO,QAAQ,KAAK;AACtD,QAAI,WAAW;AACb,aAAO,YAAY;AAAA,IACrB;AACA,WAAO;AAAA,EACT;AAEA,aAAW,iBAAiB,iBAAiB;AAC3C,UAAM,eAAe,MAAM,aAAa;AACxC,QAAI,iBAAiB,OAAW;AAEhC,UAAM,YAAY,gBAAgB,cAAc,eAAe,KAAK;AACpE,QAAI,WAAW;AACb,aAAO,YAAY,KAAK,OAAO,WAAW,SAAS;AAAA,IACrD;AAAA,EACF;AAEA,SAAO;AACT;AAEO,SAAS,iBACd,OACa;AACb,QAAM,EAAE,SAAS,QAAQ,QAAQ,SAAS,cAAc;AAExD,QAAM,aAAa,yBAAyB,SAAS,MAAM;AAC3D,QAAM,cAAc,yBAAyB,QAAQ,SAAS,OAAO;AACrE,QAAM,cAAc,yBAAyB,QAAQ,SAAS,OAAO;AACrE,QAAM,eAAe,yBAAyB,SAAS,SAAS,QAAQ;AACxE,QAAM,iBAAiB,yBAAyB,WAAW,SAAS,UAAU;AAE9E,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;"}

package/dist/components/Box/opacity/opacity.module.css

@@ -0,0 +1,51 @@
+/* opacity: full (1) */
+._full_15ao7_2 { opacity: 1; }
+._full\:h_15ao7_3:hover { opacity: 1; }
+._full\:f_15ao7_4:focus { opacity: 1; }
+._full\:a_15ao7_5:active { opacity: 1; }
+._full\:d_15ao7_6:disabled { opacity: 1; }
+
+@media (min-width: 640px) { ._full_sm_15ao7_8 { opacity: 1; } ._full_sm\:h_15ao7_8:hover { opacity: 1; } ._full_sm\:f_15ao7_8:focus { opacity: 1; } ._full_sm\:a_15ao7_8:active { opacity: 1; } ._full_sm\:d_15ao7_8:disabled { opacity: 1; } }
+@media (min-width: 768px) { ._full_md_15ao7_9 { opacity: 1; } ._full_md\:h_15ao7_9:hover { opacity: 1; } ._full_md\:f_15ao7_9:focus { opacity: 1; } ._full_md\:a_15ao7_9:active { opacity: 1; } ._full_md\:d_15ao7_9:disabled { opacity: 1; } }
+@media (min-width: 1024px) { ._full_lg_15ao7_10 { opacity: 1; } ._full_lg\:h_15ao7_10:hover { opacity: 1; } ._full_lg\:f_15ao7_10:focus { opacity: 1; } ._full_lg\:a_15ao7_10:active { opacity: 1; } ._full_lg\:d_15ao7_10:disabled { opacity: 1; } }
+@media (min-width: 1280px) { ._full_xl_15ao7_11 { opacity: 1; } ._full_xl\:h_15ao7_11:hover { opacity: 1; } ._full_xl\:f_15ao7_11:focus { opacity: 1; } ._full_xl\:a_15ao7_11:active { opacity: 1; } ._full_xl\:d_15ao7_11:disabled { opacity: 1; } }
+@media (min-width: 1536px) { ._full_2xl_15ao7_12 { opacity: 1; } ._full_2xl\:h_15ao7_12:hover { opacity: 1; } ._full_2xl\:f_15ao7_12:focus { opacity: 1; } ._full_2xl\:a_15ao7_12:active { opacity: 1; } ._full_2xl\:d_15ao7_12:disabled { opacity: 1; } }
+
+/* opacity: semi (0.6) */
+._semi_15ao7_15 { opacity: 0.6; }
+._semi\:h_15ao7_16:hover { opacity: 0.6; }
+._semi\:f_15ao7_17:focus { opacity: 0.6; }
+._semi\:a_15ao7_18:active { opacity: 0.6; }
+._semi\:d_15ao7_19:disabled { opacity: 0.6; }
+
+@media (min-width: 640px) { ._semi_sm_15ao7_21 { opacity: 0.6; } ._semi_sm\:h_15ao7_21:hover { opacity: 0.6; } ._semi_sm\:f_15ao7_21:focus { opacity: 0.6; } ._semi_sm\:a_15ao7_21:active { opacity: 0.6; } ._semi_sm\:d_15ao7_21:disabled { opacity: 0.6; } }
+@media (min-width: 768px) { ._semi_md_15ao7_22 { opacity: 0.6; } ._semi_md\:h_15ao7_22:hover { opacity: 0.6; } ._semi_md\:f_15ao7_22:focus { opacity: 0.6; } ._semi_md\:a_15ao7_22:active { opacity: 0.6; } ._semi_md\:d_15ao7_22:disabled { opacity: 0.6; } }
+@media (min-width: 1024px) { ._semi_lg_15ao7_23 { opacity: 0.6; } ._semi_lg\:h_15ao7_23:hover { opacity: 0.6; } ._semi_lg\:f_15ao7_23:focus { opacity: 0.6; } ._semi_lg\:a_15ao7_23:active { opacity: 0.6; } ._semi_lg\:d_15ao7_23:disabled { opacity: 0.6; } }
+@media (min-width: 1280px) { ._semi_xl_15ao7_24 { opacity: 0.6; } ._semi_xl\:h_15ao7_24:hover { opacity: 0.6; } ._semi_xl\:f_15ao7_24:focus { opacity: 0.6; } ._semi_xl\:a_15ao7_24:active { opacity: 0.6; } ._semi_xl\:d_15ao7_24:disabled { opacity: 0.6; } }
+@media (min-width: 1536px) { ._semi_2xl_15ao7_25 { opacity: 0.6; } ._semi_2xl\:h_15ao7_25:hover { opacity: 0.6; } ._semi_2xl\:f_15ao7_25:focus { opacity: 0.6; } ._semi_2xl\:a_15ao7_25:active { opacity: 0.6; } ._semi_2xl\:d_15ao7_25:disabled { opacity: 0.6; } }
+
+/* opacity: faint (0.4) */
+._faint_15ao7_28 { opacity: 0.4; }
+._faint\:h_15ao7_29:hover { opacity: 0.4; }
+._faint\:f_15ao7_30:focus { opacity: 0.4; }
+._faint\:a_15ao7_31:active { opacity: 0.4; }
+._faint\:d_15ao7_32:disabled { opacity: 0.4; }
+
+@media (min-width: 640px) { ._faint_sm_15ao7_34 { opacity: 0.4; } ._faint_sm\:h_15ao7_34:hover { opacity: 0.4; } ._faint_sm\:f_15ao7_34:focus { opacity: 0.4; } ._faint_sm\:a_15ao7_34:active { opacity: 0.4; } ._faint_sm\:d_15ao7_34:disabled { opacity: 0.4; } }
+@media (min-width: 768px) { ._faint_md_15ao7_35 { opacity: 0.4; } ._faint_md\:h_15ao7_35:hover { opacity: 0.4; } ._faint_md\:f_15ao7_35:focus { opacity: 0.4; } ._faint_md\:a_15ao7_35:active { opacity: 0.4; } ._faint_md\:d_15ao7_35:disabled { opacity: 0.4; } }
+@media (min-width: 1024px) { ._faint_lg_15ao7_36 { opacity: 0.4; } ._faint_lg\:h_15ao7_36:hover { opacity: 0.4; } ._faint_lg\:f_15ao7_36:focus { opacity: 0.4; } ._faint_lg\:a_15ao7_36:active { opacity: 0.4; } ._faint_lg\:d_15ao7_36:disabled { opacity: 0.4; } }
+@media (min-width: 1280px) { ._faint_xl_15ao7_37 { opacity: 0.4; } ._faint_xl\:h_15ao7_37:hover { opacity: 0.4; } ._faint_xl\:f_15ao7_37:focus { opacity: 0.4; } ._faint_xl\:a_15ao7_37:active { opacity: 0.4; } ._faint_xl\:d_15ao7_37:disabled { opacity: 0.4; } }
+@media (min-width: 1536px) { ._faint_2xl_15ao7_38 { opacity: 0.4; } ._faint_2xl\:h_15ao7_38:hover { opacity: 0.4; } ._faint_2xl\:f_15ao7_38:focus { opacity: 0.4; } ._faint_2xl\:a_15ao7_38:active { opacity: 0.4; } ._faint_2xl\:d_15ao7_38:disabled { opacity: 0.4; } }
+
+/* opacity: invisible (0) */
+._invisible_15ao7_41 { opacity: 0; }
+._invisible\:h_15ao7_42:hover { opacity: 0; }
+._invisible\:f_15ao7_43:focus { opacity: 0; }
+._invisible\:a_15ao7_44:active { opacity: 0; }
+._invisible\:d_15ao7_45:disabled { opacity: 0; }
+
+@media (min-width: 640px) { ._invisible_sm_15ao7_47 { opacity: 0; } ._invisible_sm\:h_15ao7_47:hover { opacity: 0; } ._invisible_sm\:f_15ao7_47:focus { opacity: 0; } ._invisible_sm\:a_15ao7_47:active { opacity: 0; } ._invisible_sm\:d_15ao7_47:disabled { opacity: 0; } }
+@media (min-width: 768px) { ._invisible_md_15ao7_48 { opacity: 0; } ._invisible_md\:h_15ao7_48:hover { opacity: 0; } ._invisible_md\:f_15ao7_48:focus { opacity: 0; } ._invisible_md\:a_15ao7_48:active { opacity: 0; } ._invisible_md\:d_15ao7_48:disabled { opacity: 0; } }
+@media (min-width: 1024px) { ._invisible_lg_15ao7_49 { opacity: 0; } ._invisible_lg\:h_15ao7_49:hover { opacity: 0; } ._invisible_lg\:f_15ao7_49:focus { opacity: 0; } ._invisible_lg\:a_15ao7_49:active { opacity: 0; } ._invisible_lg\:d_15ao7_49:disabled { opacity: 0; } }
+@media (min-width: 1280px) { ._invisible_xl_15ao7_50 { opacity: 0; } ._invisible_xl\:h_15ao7_50:hover { opacity: 0; } ._invisible_xl\:f_15ao7_50:focus { opacity: 0; } ._invisible_xl\:a_15ao7_50:active { opacity: 0; } ._invisible_xl\:d_15ao7_50:disabled { opacity: 0; } }
+@media (min-width: 1536px) { ._invisible_2xl_15ao7_51 { opacity: 0; } ._invisible_2xl\:h_15ao7_51:hover { opacity: 0; } ._invisible_2xl\:f_15ao7_51:focus { opacity: 0; } ._invisible_2xl\:a_15ao7_51:active { opacity: 0; } ._invisible_2xl\:d_15ao7_51:disabled { opacity: 0; } }