sellmate-design-system-react 0.1.0

package/dist/components/Switch/Switch.cjs

@@ -0,0 +1,91 @@
+"use client";
+'use strict';
+
+require('react');
+var RSwitch = require('@radix-ui/react-switch');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function Switch({
+  value = false,
+  label,
+  disabled = false,
+  onValueChange,
+  className,
+  style
+}) {
+  const trackBg = disabled ? value ? "var(--cmp-switch-bg-disabled-on)" : "var(--cmp-switch-bg-disabled-off)" : value ? "var(--cmp-switch-bg-on)" : "var(--cmp-switch-bg-off)";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: cn(
+        "inline-flex items-center gap-[6px]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RSwitch__namespace.Root,
+          {
+            checked: value,
+            disabled,
+            onCheckedChange: (v) => onValueChange?.(v),
+            className: cn(
+              "relative h-[20px] w-[32px] flex-shrink-0 rounded-full p-[2px] outline-none transition-colors",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            style: { background: trackBg },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              RSwitch__namespace.Thumb,
+              {
+                className: "block h-[16px] w-[16px] rounded-full transition-transform data-[state=checked]:translate-x-[12px]",
+                style: {
+                  background: disabled ? "var(--cmp-switch-knob-disabled)" : "var(--cmp-switch-knob-default)"
+                }
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "text-[12px] leading-[20px]",
+            style: {
+              color: disabled ? "var(--color-grey-65)" : "var(--sys-color-field-text-default)"
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.Switch = Switch;
+//# sourceMappingURL=Switch.cjs.map
+//# sourceMappingURL=Switch.cjs.map

package/dist/components/Switch/Switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/Switch/Switch.tsx"],"names":["twMerge","clsx","jsxs","jsx","RSwitch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACWO,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA,GAAQ,KAAA;AAAA,EACR,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,aAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,UAAU,QAAA,GACZ,KAAA,GACE,kCAAA,GACA,mCAAA,GACF,QACE,yBAAA,GACA,0BAAA;AAEN,EAAA,uBACEC,eAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,oCAAA;AAAA,QACA,WAAW,oBAAA,GAAuB,gBAAA;AAAA,QAClC;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAASC,kBAAA,CAAA,IAAA;AAAA,UAAR;AAAA,YACC,OAAA,EAAS,KAAA;AAAA,YACT,QAAA;AAAA,YACA,eAAA,EAAiB,CAAA,CAAA,KAAK,aAAA,GAAgB,CAAC,CAAA;AAAA,YACvC,SAAA,EAAW,EAAA;AAAA,cACT,8FAAA;AAAA,cACA,WAAW,oBAAA,GAAuB;AAAA,aACpC;AAAA,YACA,KAAA,EAAO,EAAE,UAAA,EAAY,OAAA,EAAQ;AAAA,YAE7B,QAAA,kBAAAD,cAAA;AAAA,cAASC,kBAAA,CAAA,KAAA;AAAA,cAAR;AAAA,gBACC,SAAA,EAAU,mGAAA;AAAA,gBACV,KAAA,EAAO;AAAA,kBACL,UAAA,EAAY,WACR,iCAAA,GACA;AAAA;AACN;AAAA;AACF;AAAA,SACF;AAAA,QACC,KAAA,oBACCD,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,4BAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,KAAA,EAAO,WAAW,sBAAA,GAAyB;AAAA,aAC7C;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ","file":"Switch.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { type CSSProperties } from 'react';\nimport * as RSwitch from '@radix-ui/react-switch';\nimport { cn } from '../../lib/cn';\n\nexport interface SwitchProps {\n  /** on/off 상태 */\n  value?: boolean;\n  /** 라벨 */\n  label?: string;\n  /** 비활성 */\n  disabled?: boolean;\n  /** 변경 (sdUpdate) */\n  onValueChange?: (value: boolean) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** Switch — sd-switch 포팅 (Radix Switch). 32×20 트랙, 16 노브. */\nexport function Switch({\n  value = false,\n  label,\n  disabled = false,\n  onValueChange,\n  className,\n  style,\n}: SwitchProps) {\n  const trackBg = disabled\n    ? value\n      ? 'var(--cmp-switch-bg-disabled-on)'\n      : 'var(--cmp-switch-bg-disabled-off)'\n    : value\n      ? 'var(--cmp-switch-bg-on)'\n      : 'var(--cmp-switch-bg-off)';\n\n  return (\n    <label\n      className={cn(\n        'inline-flex items-center gap-[6px]',\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        className,\n      )}\n      style={style}\n    >\n      <RSwitch.Root\n        checked={value}\n        disabled={disabled}\n        onCheckedChange={v => onValueChange?.(v)}\n        className={cn(\n          'relative h-[20px] w-[32px] flex-shrink-0 rounded-full p-[2px] outline-none transition-colors',\n          disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        )}\n        style={{ background: trackBg }}\n      >\n        <RSwitch.Thumb\n          className=\"block h-[16px] w-[16px] rounded-full transition-transform data-[state=checked]:translate-x-[12px]\"\n          style={{\n            background: disabled\n              ? 'var(--cmp-switch-knob-disabled)'\n              : 'var(--cmp-switch-knob-default)',\n          }}\n        />\n      </RSwitch.Root>\n      {label && (\n        <span\n          className=\"text-[12px] leading-[20px]\"\n          style={{\n            color: disabled ? 'var(--color-grey-65)' : 'var(--sys-color-field-text-default)',\n          }}\n        >\n          {label}\n        </span>\n      )}\n    </label>\n  );\n}\n"]}

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties } from 'react';
+export interface SwitchProps {
+    /** on/off 상태 */
+    value?: boolean;
+    /** 라벨 */
+    label?: string;
+    /** 비활성 */
+    disabled?: boolean;
+    /** 변경 (sdUpdate) */
+    onValueChange?: (value: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Switch — sd-switch 포팅 (Radix Switch). 32×20 트랙, 16 노브. */
+export declare function Switch({ value, label, disabled, onValueChange, className, style, }: SwitchProps): import("react").JSX.Element;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,69 @@
+"use client";
+import 'react';
+import * as RSwitch from '@radix-ui/react-switch';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Switch({
+  value = false,
+  label,
+  disabled = false,
+  onValueChange,
+  className,
+  style
+}) {
+  const trackBg = disabled ? value ? "var(--cmp-switch-bg-disabled-on)" : "var(--cmp-switch-bg-disabled-off)" : value ? "var(--cmp-switch-bg-on)" : "var(--cmp-switch-bg-off)";
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "inline-flex items-center gap-[6px]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          RSwitch.Root,
+          {
+            checked: value,
+            disabled,
+            onCheckedChange: (v) => onValueChange?.(v),
+            className: cn(
+              "relative h-[20px] w-[32px] flex-shrink-0 rounded-full p-[2px] outline-none transition-colors",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            style: { background: trackBg },
+            children: /* @__PURE__ */ jsx(
+              RSwitch.Thumb,
+              {
+                className: "block h-[16px] w-[16px] rounded-full transition-transform data-[state=checked]:translate-x-[12px]",
+                style: {
+                  background: disabled ? "var(--cmp-switch-knob-disabled)" : "var(--cmp-switch-knob-default)"
+                }
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-[12px] leading-[20px]",
+            style: {
+              color: disabled ? "var(--color-grey-65)" : "var(--sys-color-field-text-default)"
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Switch };
+//# sourceMappingURL=Switch.js.map
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;AAOO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACWO,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA,GAAQ,KAAA;AAAA,EACR,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,aAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,UAAU,QAAA,GACZ,KAAA,GACE,kCAAA,GACA,mCAAA,GACF,QACE,yBAAA,GACA,0BAAA;AAEN,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,oCAAA;AAAA,QACA,WAAW,oBAAA,GAAuB,gBAAA;AAAA,QAClC;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAS,OAAA,CAAA,IAAA;AAAA,UAAR;AAAA,YACC,OAAA,EAAS,KAAA;AAAA,YACT,QAAA;AAAA,YACA,eAAA,EAAiB,CAAA,CAAA,KAAK,aAAA,GAAgB,CAAC,CAAA;AAAA,YACvC,SAAA,EAAW,EAAA;AAAA,cACT,8FAAA;AAAA,cACA,WAAW,oBAAA,GAAuB;AAAA,aACpC;AAAA,YACA,KAAA,EAAO,EAAE,UAAA,EAAY,OAAA,EAAQ;AAAA,YAE7B,QAAA,kBAAA,GAAA;AAAA,cAAS,OAAA,CAAA,KAAA;AAAA,cAAR;AAAA,gBACC,SAAA,EAAU,mGAAA;AAAA,gBACV,KAAA,EAAO;AAAA,kBACL,UAAA,EAAY,WACR,iCAAA,GACA;AAAA;AACN;AAAA;AACF;AAAA,SACF;AAAA,QACC,KAAA,oBACC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,4BAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,KAAA,EAAO,WAAW,sBAAA,GAAyB;AAAA,aAC7C;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ","file":"Switch.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { type CSSProperties } from 'react';\nimport * as RSwitch from '@radix-ui/react-switch';\nimport { cn } from '../../lib/cn';\n\nexport interface SwitchProps {\n  /** on/off 상태 */\n  value?: boolean;\n  /** 라벨 */\n  label?: string;\n  /** 비활성 */\n  disabled?: boolean;\n  /** 변경 (sdUpdate) */\n  onValueChange?: (value: boolean) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** Switch — sd-switch 포팅 (Radix Switch). 32×20 트랙, 16 노브. */\nexport function Switch({\n  value = false,\n  label,\n  disabled = false,\n  onValueChange,\n  className,\n  style,\n}: SwitchProps) {\n  const trackBg = disabled\n    ? value\n      ? 'var(--cmp-switch-bg-disabled-on)'\n      : 'var(--cmp-switch-bg-disabled-off)'\n    : value\n      ? 'var(--cmp-switch-bg-on)'\n      : 'var(--cmp-switch-bg-off)';\n\n  return (\n    <label\n      className={cn(\n        'inline-flex items-center gap-[6px]',\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        className,\n      )}\n      style={style}\n    >\n      <RSwitch.Root\n        checked={value}\n        disabled={disabled}\n        onCheckedChange={v => onValueChange?.(v)}\n        className={cn(\n          'relative h-[20px] w-[32px] flex-shrink-0 rounded-full p-[2px] outline-none transition-colors',\n          disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        )}\n        style={{ background: trackBg }}\n      >\n        <RSwitch.Thumb\n          className=\"block h-[16px] w-[16px] rounded-full transition-transform data-[state=checked]:translate-x-[12px]\"\n          style={{\n            background: disabled\n              ? 'var(--cmp-switch-knob-disabled)'\n              : 'var(--cmp-switch-knob-default)',\n          }}\n        />\n      </RSwitch.Root>\n      {label && (\n        <span\n          className=\"text-[12px] leading-[20px]\"\n          style={{\n            color: disabled ? 'var(--color-grey-65)' : 'var(--sys-color-field-text-default)',\n          }}\n        >\n          {label}\n        </span>\n      )}\n    </label>\n  );\n}\n"]}

package/dist/components/Switch/index.d.ts

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from './Switch';