sellmate-design-system-react 0.1.0

package/dist/components/Toggle/Toggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/Toggle/Toggle.tsx"],"names":["twMerge","clsx","jsx"],"mappings":";;;;;;;AAOO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACaO,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA,GAAQ,KAAA;AAAA,EACR,KAAA,GAAQ,EAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,aAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,MAAA,GAAS,QAAA,GACX,mCAAA,GACA,KAAA,GACE,iCAAA,GACA,kCAAA;AACN,EAAA,MAAM,EAAA,GAAK,QAAA,GACP,+BAAA,GACA,KAAA,GACE,6BAAA,GACA,8BAAA;AACN,EAAA,MAAM,OAAA,GAAU,QAAA,GACZ,oCAAA,GACA,KAAA,GACE,kCAAA,GACA,mCAAA;AAEN,EAAA,uBACEC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,QAAA;AAAA,MACA,cAAA,EAAc,KAAA;AAAA,MACd,SAAS,MAAM,CAAC,QAAA,IAAY,aAAA,GAAgB,CAAC,KAAK,CAAA;AAAA,MAClD,SAAA,EAAW,EAAA;AAAA,QACT,uKAAA;AAAA,QACA,WAAW,oBAAA,GAAuB,gBAAA;AAAA;AAAA,QAElC,CAAC,QAAA,IACC,CAAC,KAAA,IACD,6IAAA;AAAA,QACF;AAAA,OACF;AAAA,MACA,KAAA,EAAO,EAAE,UAAA,EAAY,EAAA,EAAI,aAAa,MAAA,EAAQ,KAAA,EAAO,OAAA,EAAS,GAAG,KAAA,EAAM;AAAA,MAEtE,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"Toggle.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 { cn } from '../../lib/cn';\n\nexport interface ToggleProps {\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/**\n * Toggle — sd-toggle 포팅. 알약형 토글 버튼.\n * default(흰 배경/회색), hover(파란 채움), select(흰 배경/파란 테두리·글자), disabled.\n */\nexport function Toggle({\n  value = false,\n  label = '',\n  disabled = false,\n  onValueChange,\n  className,\n  style,\n}: ToggleProps) {\n  const border = disabled\n    ? 'var(--cmp-toggle-border-disabled)'\n    : value\n      ? 'var(--cmp-toggle-border-select)'\n      : 'var(--cmp-toggle-border-default)';\n  const bg = disabled\n    ? 'var(--cmp-toggle-bg-disabled)'\n    : value\n      ? 'var(--cmp-toggle-bg-select)'\n      : 'var(--cmp-toggle-bg-default)';\n  const content = disabled\n    ? 'var(--cmp-toggle-content-disabled)'\n    : value\n      ? 'var(--cmp-toggle-content-select)'\n      : 'var(--cmp-toggle-content-default)';\n\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      aria-pressed={value}\n      onClick={() => !disabled && onValueChange?.(!value)}\n      className={cn(\n        'box-border inline-flex h-[28px] items-center justify-center whitespace-nowrap rounded-full border border-solid px-[12px] text-[12px] leading-[20px] transition-colors',\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        // 미선택(off) hover 시 파란 채움 + 흰 글자\n        !disabled &&\n          !value &&\n          'hover:!bg-[var(--cmp-toggle-bg-hover)] hover:!text-[color:var(--cmp-toggle-content-hover)] hover:!border-[color:var(--cmp-toggle-bg-hover)]',\n        className,\n      )}\n      style={{ background: bg, borderColor: border, color: content, ...style } as CSSProperties}\n    >\n      {label}\n    </button>\n  );\n}\n"]}

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties } from 'react';
+export interface ToggleProps {
+    /** 선택(on/off) 상태 */
+    value?: boolean;
+    /** 라벨 */
+    label?: string;
+    /** 비활성 */
+    disabled?: boolean;
+    /** 변경 (sdUpdate) */
+    onValueChange?: (value: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Toggle — sd-toggle 포팅. 알약형 토글 버튼.
+ * default(흰 배경/회색), hover(파란 채움), select(흰 배경/파란 테두리·글자), disabled.
+ */
+export declare function Toggle({ value, label, disabled, onValueChange, className, style, }: ToggleProps): import("react").JSX.Element;

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,43 @@
+"use client";
+import 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Toggle({
+  value = false,
+  label = "",
+  disabled = false,
+  onValueChange,
+  className,
+  style
+}) {
+  const border = disabled ? "var(--cmp-toggle-border-disabled)" : value ? "var(--cmp-toggle-border-select)" : "var(--cmp-toggle-border-default)";
+  const bg = disabled ? "var(--cmp-toggle-bg-disabled)" : value ? "var(--cmp-toggle-bg-select)" : "var(--cmp-toggle-bg-default)";
+  const content = disabled ? "var(--cmp-toggle-content-disabled)" : value ? "var(--cmp-toggle-content-select)" : "var(--cmp-toggle-content-default)";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      disabled,
+      "aria-pressed": value,
+      onClick: () => !disabled && onValueChange?.(!value),
+      className: cn(
+        "box-border inline-flex h-[28px] items-center justify-center whitespace-nowrap rounded-full border border-solid px-[12px] text-[12px] leading-[20px] transition-colors",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        // 미선택(off) hover 시 파란 채움 + 흰 글자
+        !disabled && !value && "hover:!bg-[var(--cmp-toggle-bg-hover)] hover:!text-[color:var(--cmp-toggle-content-hover)] hover:!border-[color:var(--cmp-toggle-bg-hover)]",
+        className
+      ),
+      style: { background: bg, borderColor: border, color: content, ...style },
+      children: label
+    }
+  );
+}
+
+export { Toggle };
+//# sourceMappingURL=Toggle.js.map
+//# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":";;;;;AAOO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACaO,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA,GAAQ,KAAA;AAAA,EACR,KAAA,GAAQ,EAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,aAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,MAAA,GAAS,QAAA,GACX,mCAAA,GACA,KAAA,GACE,iCAAA,GACA,kCAAA;AACN,EAAA,MAAM,EAAA,GAAK,QAAA,GACP,+BAAA,GACA,KAAA,GACE,6BAAA,GACA,8BAAA;AACN,EAAA,MAAM,OAAA,GAAU,QAAA,GACZ,oCAAA,GACA,KAAA,GACE,kCAAA,GACA,mCAAA;AAEN,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,QAAA;AAAA,MACA,cAAA,EAAc,KAAA;AAAA,MACd,SAAS,MAAM,CAAC,QAAA,IAAY,aAAA,GAAgB,CAAC,KAAK,CAAA;AAAA,MAClD,SAAA,EAAW,EAAA;AAAA,QACT,uKAAA;AAAA,QACA,WAAW,oBAAA,GAAuB,gBAAA;AAAA;AAAA,QAElC,CAAC,QAAA,IACC,CAAC,KAAA,IACD,6IAAA;AAAA,QACF;AAAA,OACF;AAAA,MACA,KAAA,EAAO,EAAE,UAAA,EAAY,EAAA,EAAI,aAAa,MAAA,EAAQ,KAAA,EAAO,OAAA,EAAS,GAAG,KAAA,EAAM;AAAA,MAEtE,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"Toggle.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 { cn } from '../../lib/cn';\n\nexport interface ToggleProps {\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/**\n * Toggle — sd-toggle 포팅. 알약형 토글 버튼.\n * default(흰 배경/회색), hover(파란 채움), select(흰 배경/파란 테두리·글자), disabled.\n */\nexport function Toggle({\n  value = false,\n  label = '',\n  disabled = false,\n  onValueChange,\n  className,\n  style,\n}: ToggleProps) {\n  const border = disabled\n    ? 'var(--cmp-toggle-border-disabled)'\n    : value\n      ? 'var(--cmp-toggle-border-select)'\n      : 'var(--cmp-toggle-border-default)';\n  const bg = disabled\n    ? 'var(--cmp-toggle-bg-disabled)'\n    : value\n      ? 'var(--cmp-toggle-bg-select)'\n      : 'var(--cmp-toggle-bg-default)';\n  const content = disabled\n    ? 'var(--cmp-toggle-content-disabled)'\n    : value\n      ? 'var(--cmp-toggle-content-select)'\n      : 'var(--cmp-toggle-content-default)';\n\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      aria-pressed={value}\n      onClick={() => !disabled && onValueChange?.(!value)}\n      className={cn(\n        'box-border inline-flex h-[28px] items-center justify-center whitespace-nowrap rounded-full border border-solid px-[12px] text-[12px] leading-[20px] transition-colors',\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        // 미선택(off) hover 시 파란 채움 + 흰 글자\n        !disabled &&\n          !value &&\n          'hover:!bg-[var(--cmp-toggle-bg-hover)] hover:!text-[color:var(--cmp-toggle-content-hover)] hover:!border-[color:var(--cmp-toggle-bg-hover)]',\n        className,\n      )}\n      style={{ background: bg, borderColor: border, color: content, ...style } as CSSProperties}\n    >\n      {label}\n    </button>\n  );\n}\n"]}

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

@@ -0,0 +1 @@
+export { Toggle, type ToggleProps } from './Toggle';