@soave/ui 0.1.0 → 0.2.0

package/dist/adapters/css-variables.d.ts

@@ -0,0 +1,2 @@
+import type { StyleAdapter } from "./types";
+export declare const cssVariablesAdapter: StyleAdapter;

package/dist/adapters/css-variables.mjs

@@ -0,0 +1,228 @@
+export const cssVariablesAdapter = {
+  name: "css-variables",
+  description: "CSS Variables \u30D9\u30FC\u30B9\u306E\u30B9\u30BF\u30A4\u30EA\u30F3\u30B0\uFF08BEM\u547D\u540D\uFF09",
+  getClasses(component, state) {
+    switch (component) {
+      case "button":
+        return getCssVariablesButtonClasses(state);
+      case "input":
+        return getCssVariablesInputClasses(state);
+      case "card":
+        return getCssVariablesCardClasses(state);
+      case "dialog":
+        return getCssVariablesDialogClasses(state);
+      case "dialog-overlay":
+        return "dialog__overlay";
+      case "checkbox":
+        return getCssVariablesCheckboxClasses(state);
+      case "radio":
+        return getCssVariablesRadioClasses(state);
+      case "radio-group":
+        return getCssVariablesRadioGroupClasses(state);
+      case "radio-indicator":
+        return "radio__indicator";
+      case "switch":
+        return getCssVariablesSwitchClasses(state);
+      case "textarea":
+        return getCssVariablesTextareaClasses(state);
+      case "select":
+        return getCssVariablesSelectClasses(state);
+      case "select-content":
+        return "select__content";
+      case "select-item":
+        return "select__item";
+      case "select-value":
+        return getCssVariablesSelectValueClasses(state);
+      case "select-trigger-icon":
+        return "select__trigger-icon";
+      case "toast":
+        return getCssVariablesToastClasses(state);
+      case "toast-title":
+        return "toast__title";
+      case "toast-description":
+        return "toast__description";
+      case "toast-action":
+        return "toast__action";
+      case "toast-dismiss":
+        return "toast__dismiss";
+      case "toaster":
+        return getCssVariablesToasterClasses(state);
+      case "tooltip":
+        return getCssVariablesTooltipClasses(state);
+      case "popover":
+        return getCssVariablesPopoverClasses(state);
+      case "dropdown":
+        return getCssVariablesDropdownClasses(state);
+      case "dropdown-item":
+        return "dropdown__item";
+      case "sheet":
+        return getCssVariablesSheetClasses(state);
+      case "sheet-overlay":
+        return "sheet__overlay";
+      case "sheet-header":
+        return "sheet__header";
+      case "sheet-title":
+        return "sheet__title";
+      case "sheet-description":
+        return "sheet__description";
+      case "sheet-footer":
+        return "sheet__footer";
+      case "sheet-close":
+        return "sheet__close";
+      case "alert":
+        return getCssVariablesAlertClasses(state);
+      case "alert-title":
+        return "alert__title";
+      case "alert-description":
+        return "alert__description";
+      case "label":
+        return "label";
+      // Dialog sub-components
+      case "dialog-header":
+        return "dialog__header";
+      case "dialog-title":
+        return "dialog__title";
+      case "dialog-description":
+        return "dialog__description";
+      case "dialog-footer":
+        return "dialog__footer";
+      case "dialog-close":
+        return "dialog__close";
+      // Card sub-components
+      case "card-header":
+        return "card__header";
+      case "card-title":
+        return "card__title";
+      case "card-description":
+        return "card__description";
+      case "card-content":
+        return "card__content";
+      case "card-footer":
+        return "card__footer";
+      default:
+        return "";
+    }
+  }
+};
+function getCssVariablesButtonClasses(state) {
+  return [
+    "button",
+    `button--${state.variant}`,
+    `button--${state.size}`,
+    state.disabled && "button--disabled",
+    state.loading && "button--loading"
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesInputClasses(state) {
+  return [
+    "input",
+    `input--${state.size}`,
+    state.error && "input--error",
+    state.disabled && "input--disabled",
+    state.readonly && "input--readonly"
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesCardClasses(state) {
+  return [
+    "card",
+    state.padding !== "none" && `card--padding-${state.padding}`
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesDialogClasses(state) {
+  return [
+    "dialog",
+    state.is_open && "dialog--open"
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesCheckboxClasses(state) {
+  return [
+    "checkbox",
+    state.checked && "checkbox--checked",
+    state.indeterminate && "checkbox--indeterminate",
+    state.disabled && "checkbox--disabled"
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesRadioClasses(state) {
+  return [
+    "radio",
+    state.checked && "radio--checked",
+    state.disabled && "radio--disabled"
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesSwitchClasses(state) {
+  return [
+    "switch",
+    state.checked && "switch--checked",
+    state.disabled && "switch--disabled"
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesTextareaClasses(state) {
+  return [
+    "textarea",
+    `textarea--${state.size}`,
+    state.error && "textarea--error",
+    state.disabled && "textarea--disabled",
+    state.readonly && "textarea--readonly"
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesSelectClasses(state) {
+  return [
+    "select",
+    `select--${state.size}`,
+    state.is_open && "select--open",
+    state.disabled && "select--disabled"
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesToastClasses(state) {
+  return [
+    "toast",
+    `toast--${state.variant}`
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesTooltipClasses(state) {
+  return [
+    "tooltip",
+    state.is_open && "tooltip--open",
+    `tooltip--${state.side}`
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesPopoverClasses(state) {
+  return [
+    "popover",
+    state.is_open && "popover--open"
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesDropdownClasses(state) {
+  return [
+    "dropdown",
+    state.is_open && "dropdown--open"
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesSheetClasses(state) {
+  return [
+    "sheet",
+    state.is_open && "sheet--open",
+    `sheet--${state.side}`
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesAlertClasses(state) {
+  return ["alert", `alert--${state.variant}`].join(" ");
+}
+function getCssVariablesSelectValueClasses(state) {
+  return [
+    "select__value",
+    !state.hasValue && "select__value--placeholder"
+  ].filter(Boolean).join(" ");
+}
+function getCssVariablesToasterClasses(state) {
+  return [
+    "toaster",
+    `toaster--${state.position}`
+  ].join(" ");
+}
+function getCssVariablesRadioGroupClasses(state) {
+  return [
+    "radio-group",
+    `radio-group--${state.orientation}`
+  ].join(" ");
+}

package/dist/adapters/headless.d.ts

@@ -0,0 +1,7 @@
+import type { StyleAdapter } from "./types";
+/**
+ * Headless Adapter
+ * スタイル情報を一切返さない
+ * ユーザーが完全にカスタムスタイルを適用したい場合に使用
+ */
+export declare const headlessAdapter: StyleAdapter;

package/dist/adapters/headless.mjs

@@ -0,0 +1,7 @@
+export const headlessAdapter = {
+  name: "headless",
+  description: "Headless \u30E2\u30FC\u30C9\uFF08\u30B9\u30BF\u30A4\u30EB\u9069\u7528\u306A\u3057\uFF09",
+  getClasses(_component, _state) {
+    return "";
+  }
+};

package/dist/adapters/index.d.ts

@@ -0,0 +1,5 @@
+export type { StyleAdapter } from "./types";
+export { registerAdapter, getAdapter, getRegisteredAdapters, ADAPTER_REGISTRY } from "./types";
+export { tailwindAdapter } from "./tailwind";
+export { cssVariablesAdapter } from "./css-variables";
+export { headlessAdapter } from "./headless";

package/dist/adapters/index.mjs

@@ -0,0 +1,11 @@
+export { registerAdapter, getAdapter, getRegisteredAdapters, ADAPTER_REGISTRY } from "./types.mjs";
+export { tailwindAdapter } from "./tailwind.mjs";
+export { cssVariablesAdapter } from "./css-variables.mjs";
+export { headlessAdapter } from "./headless.mjs";
+import { registerAdapter as registerAdapter2 } from "./types.mjs";
+import { tailwindAdapter as tailwindAdapter2 } from "./tailwind.mjs";
+import { cssVariablesAdapter as cssVariablesAdapter2 } from "./css-variables.mjs";
+import { headlessAdapter as headlessAdapter2 } from "./headless.mjs";
+registerAdapter2(tailwindAdapter2);
+registerAdapter2(cssVariablesAdapter2);
+registerAdapter2(headlessAdapter2);

package/dist/adapters/tailwind.d.ts

@@ -0,0 +1,2 @@
+import type { StyleAdapter } from "./types";
+export declare const tailwindAdapter: StyleAdapter;