@cieloazul310/digital-go-pandacss-preset 0.0.0 → 0.0.1-prerelease.1

package/dist/index.js

@@ -40,7 +40,7 @@ var import_digital_go_pandacss_utils = require("@cieloazul310/digital-go-pandacs
 
 // src/recipes/accordion.ts
 var import_dev = require("@pandacss/dev");
-var import_accordion = require("@ark-ui/anatomy/accordion");
+var import_accordion = require("@zag-js/accordion");
 var accordion_default = (0, import_dev.defineSlotRecipe)({
   className: "accordion",
   slots: import_accordion.anatomy.keys(),
@@ -166,42 +166,32 @@ var accordion_default = (0, import_dev.defineSlotRecipe)({
 // src/recipes/breadcrumb.ts
 var import_dev3 = require("@pandacss/dev");
 
-// ../../node_modules/@ark-ui/react/node_modules/@zag-js/anatomy/dist/index.mjs
-var createAnatomy = (name, parts = []) => ({
-  parts: (...values) => {
-    if (isEmpty(parts)) {
-      return createAnatomy(name, values);
-    }
-    throw new Error("createAnatomy().parts(...) should only be called once. Did you mean to use .extendWith(...) ?");
-  },
-  extendWith: (...values) => createAnatomy(name, [...parts, ...values]),
-  rename: (newName) => createAnatomy(newName, parts),
-  keys: () => parts,
-  build: () => [...new Set(parts)].reduce(
-    (prev, part) => Object.assign(prev, {
-      [part]: {
-        selector: [
-          `&[data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`,
-          `& [data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`
-        ].join(", "),
-        attrs: { "data-scope": toKebabCase(name), "data-part": toKebabCase(part) }
-      }
-    }),
-    {}
-  )
-});
-var toKebabCase = (value) => value.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
-var isEmpty = (v) => v.length === 0;
-
 // src/anatomy.ts
-var breadcrumbAnatomy = createAnatomy("breadcrumb").parts(
+var import_anatomy = require("@zag-js/anatomy");
+var breadcrumbAnatomy = (0, import_anatomy.createAnatomy)("breadcrumb").parts(
   "root",
   "list",
   "item",
   "link",
   "separator"
 );
-var menuListAnatomy = createAnatomy("menu-list").parts(
+var disclosureAnatomy = (0, import_anatomy.createAnatomy)("disclosure").parts(
+  "root",
+  "summary",
+  "icon",
+  "content"
+);
+var inputTextAnatomy = (0, import_anatomy.createAnatomy)("field").parts(
+  "root",
+  "errorText",
+  "helperText",
+  "input",
+  "label",
+  "select",
+  "textarea",
+  "requiredIndicator"
+);
+var menuListAnatomy = (0, import_anatomy.createAnatomy)("menu-list").parts(
   "root",
   "label",
   "content",
@@ -212,10 +202,10 @@ var menuListAnatomy = createAnatomy("menu-list").parts(
   "itemIndicator",
   "input"
 );
-var notificationBannerAnatomy = createAnatomy(
+var notificationBannerAnatomy = (0, import_anatomy.createAnatomy)(
   "notification-banner"
 ).parts("root", "icon", "close", "header", "heading", "body");
-var resourceListAnatomy = createAnatomy("resource-list").parts(
+var resourceListAnatomy = (0, import_anatomy.createAnatomy)("resource-list").parts(
   "root",
   "contentsContainer",
   "functionButton",
@@ -537,10 +527,10 @@ var button_default = (0, import_dev4.defineRecipe)({
 
 // src/recipes/checkbox.ts
 var import_dev5 = require("@pandacss/dev");
-var import_checkbox = require("@ark-ui/anatomy/checkbox");
+var import_checkbox = require("@zag-js/checkbox");
 var checkbox_default = (0, import_dev5.defineSlotRecipe)({
   className: "checkbox",
-  slots: import_checkbox.anatomy.keys(),
+  slots: import_checkbox.anatomy.extendWith("group").keys(),
   base: {
     root: {
       /**
@@ -724,8 +714,7 @@ var checkbox_default = (0, import_dev5.defineSlotRecipe)({
        * data-[size=lg]:pt-2.5 data-[size=lg]:text-dns-17N-130
        */
       color: "solid-gray.800"
-    },
-    group: {}
+    }
   },
   variants: {
     size: {
@@ -836,7 +825,7 @@ var checkbox_default = (0, import_dev5.defineSlotRecipe)({
 var import_dev6 = require("@pandacss/dev");
 var disclosure_default = (0, import_dev6.defineSlotRecipe)({
   className: "disclosure",
-  slots: ["root", "summary", "icon", "content"],
+  slots: disclosureAnatomy.keys(),
   base: {
     root: {
       /**
@@ -944,7 +933,7 @@ var divider_default = (0, import_dev7.defineRecipe)({
 });
 
 // src/recipes/drawer.ts
-var import_dialog = require("@ark-ui/anatomy/dialog");
+var import_dialog = require("@zag-js/dialog");
 var import_dev8 = require("@pandacss/dev");
 var anatomy = import_dialog.anatomy.extendWith("header", "body", "footer");
 var drawer_default = (0, import_dev8.defineSlotRecipe)({
@@ -1198,7 +1187,6 @@ var input_default = (0, import_dev11.defineRecipe)({
 
 // src/recipes/input-text.ts
 var import_dev16 = require("@pandacss/dev");
-var import_field = require("@ark-ui/anatomy/field");
 
 // src/recipes/label.ts
 var import_dev12 = require("@pandacss/dev");
@@ -1382,7 +1370,7 @@ var textarea_default = (0, import_dev15.defineRecipe)({
 var inputText = (0, import_dev16.defineSlotRecipe)({
   className: "input-text",
   description: "\u30A4\u30F3\u30D7\u30C3\u30C8\u30C6\u30AD\u30B9\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306F\u3001\u540D\u524D\u3084\u96FB\u8A71\u756A\u53F7\u306A\u3069\u30011\u884C\u4EE5\u5185\u306E\u30C6\u30AD\u30B9\u30C8\u3092\u5165\u529B\u3059\u308B\u5834\u5408\u306B\u4F7F\u7528\u3057\u307E\u3059\u3002",
-  slots: import_field.anatomy.keys(),
+  slots: inputTextAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -1496,7 +1484,7 @@ var list_default = (0, import_dev18.defineRecipe)({
 
 // src/recipes/menu.ts
 var import_dev20 = require("@pandacss/dev");
-var import_menu = require("@ark-ui/anatomy/menu");
+var import_menu = require("@zag-js/menu");
 
 // src/recipes/menu-item.ts
 var import_dev19 = require("@pandacss/dev");
@@ -2234,7 +2222,7 @@ var radio_default = (0, import_dev24.defineSlotRecipe)({
 
 // src/recipes/radio-group.ts
 var import_dev25 = require("@pandacss/dev");
-var import_radio_group = require("@ark-ui/anatomy/radio-group");
+var import_radio_group = require("@zag-js/radio-group");
 var radio_group_default = (0, import_dev25.defineSlotRecipe)({
   className: "radio-group",
   slots: import_radio_group.anatomy.keys(),
@@ -2452,7 +2440,7 @@ var resource_list_default = (0, import_dev27.defineSlotRecipe)({
 
 // src/recipes/select.ts
 var import_dev28 = require("@pandacss/dev");
-var import_select = require("@ark-ui/anatomy/select");
+var import_select = require("@zag-js/select");
 var select_default = (0, import_dev28.defineSlotRecipe)({
   className: "select",
   description: "\u30BB\u30EC\u30AF\u30C8\u30DC\u30C3\u30AF\u30B9\u306F\u3001\u8907\u6570\u306E\u9078\u629E\u80A2\u3092\u63D0\u4F9B\u3059\u308B\u30D5\u30A9\u30FC\u30E0\u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u3067\u3059\u3002",
@@ -2705,7 +2693,7 @@ var table_default = (0, import_dev29.defineSlotRecipe)({
 
 // src/recipes/tabs.ts
 var import_dev30 = require("@pandacss/dev");
-var import_tabs = require("@ark-ui/anatomy/tabs");
+var import_tabs = require("@zag-js/tabs");
 var tabs_default = (0, import_dev30.defineSlotRecipe)({
   className: "tabs",
   slots: import_tabs.anatomy.keys(),
@@ -2796,7 +2784,7 @@ var tabs_default = (0, import_dev30.defineSlotRecipe)({
 
 // src/recipes/tree-view.ts
 var import_dev31 = require("@pandacss/dev");
-var import_tree_view = require("@ark-ui/anatomy/tree-view");
+var import_tree_view = require("@zag-js/tree-view");
 var tree_view_default = (0, import_dev31.defineSlotRecipe)({
   className: "tree-view",
   slots: import_tree_view.anatomy.keys(),

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
 
 // src/recipes/accordion.ts
 import { defineSlotRecipe } from "@pandacss/dev";
-import { anatomy as accordionAnatomy } from "@ark-ui/anatomy/accordion";
+import { anatomy as accordionAnatomy } from "@zag-js/accordion";
 var accordion_default = defineSlotRecipe({
   className: "accordion",
   slots: accordionAnatomy.keys(),
@@ -133,34 +133,8 @@ var accordion_default = defineSlotRecipe({
 // src/recipes/breadcrumb.ts
 import { defineSlotRecipe as defineSlotRecipe2 } from "@pandacss/dev";
 
-// ../../node_modules/@ark-ui/react/node_modules/@zag-js/anatomy/dist/index.mjs
-var createAnatomy = (name, parts = []) => ({
-  parts: (...values) => {
-    if (isEmpty(parts)) {
-      return createAnatomy(name, values);
-    }
-    throw new Error("createAnatomy().parts(...) should only be called once. Did you mean to use .extendWith(...) ?");
-  },
-  extendWith: (...values) => createAnatomy(name, [...parts, ...values]),
-  rename: (newName) => createAnatomy(newName, parts),
-  keys: () => parts,
-  build: () => [...new Set(parts)].reduce(
-    (prev, part) => Object.assign(prev, {
-      [part]: {
-        selector: [
-          `&[data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`,
-          `& [data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`
-        ].join(", "),
-        attrs: { "data-scope": toKebabCase(name), "data-part": toKebabCase(part) }
-      }
-    }),
-    {}
-  )
-});
-var toKebabCase = (value) => value.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
-var isEmpty = (v) => v.length === 0;
-
 // src/anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
 var breadcrumbAnatomy = createAnatomy("breadcrumb").parts(
   "root",
   "list",
@@ -168,6 +142,22 @@ var breadcrumbAnatomy = createAnatomy("breadcrumb").parts(
   "link",
   "separator"
 );
+var disclosureAnatomy = createAnatomy("disclosure").parts(
+  "root",
+  "summary",
+  "icon",
+  "content"
+);
+var inputTextAnatomy = createAnatomy("field").parts(
+  "root",
+  "errorText",
+  "helperText",
+  "input",
+  "label",
+  "select",
+  "textarea",
+  "requiredIndicator"
+);
 var menuListAnatomy = createAnatomy("menu-list").parts(
   "root",
   "label",
@@ -504,10 +494,10 @@ var button_default = defineRecipe2({
 
 // src/recipes/checkbox.ts
 import { defineSlotRecipe as defineSlotRecipe3 } from "@pandacss/dev";
-import { anatomy as checkboxAnatomy } from "@ark-ui/anatomy/checkbox";
+import { anatomy as checkboxAnatomy } from "@zag-js/checkbox";
 var checkbox_default = defineSlotRecipe3({
   className: "checkbox",
-  slots: checkboxAnatomy.keys(),
+  slots: checkboxAnatomy.extendWith("group").keys(),
   base: {
     root: {
       /**
@@ -691,8 +681,7 @@ var checkbox_default = defineSlotRecipe3({
        * data-[size=lg]:pt-2.5 data-[size=lg]:text-dns-17N-130
        */
       color: "solid-gray.800"
-    },
-    group: {}
+    }
   },
   variants: {
     size: {
@@ -803,7 +792,7 @@ var checkbox_default = defineSlotRecipe3({
 import { defineSlotRecipe as defineSlotRecipe4 } from "@pandacss/dev";
 var disclosure_default = defineSlotRecipe4({
   className: "disclosure",
-  slots: ["root", "summary", "icon", "content"],
+  slots: disclosureAnatomy.keys(),
   base: {
     root: {
       /**
@@ -911,7 +900,7 @@ var divider_default = defineRecipe3({
 });
 
 // src/recipes/drawer.ts
-import { anatomy as dialogAnatomy } from "@ark-ui/anatomy/dialog";
+import { anatomy as dialogAnatomy } from "@zag-js/dialog";
 import { defineSlotRecipe as defineSlotRecipe5 } from "@pandacss/dev";
 var anatomy = dialogAnatomy.extendWith("header", "body", "footer");
 var drawer_default = defineSlotRecipe5({
@@ -1165,7 +1154,6 @@ var input_default = defineRecipe6({
 
 // src/recipes/input-text.ts
 import { defineSlotRecipe as defineSlotRecipe6 } from "@pandacss/dev";
-import { anatomy as fieldAnatomy } from "@ark-ui/anatomy/field";
 
 // src/recipes/label.ts
 import { defineRecipe as defineRecipe7 } from "@pandacss/dev";
@@ -1349,7 +1337,7 @@ var textarea_default = defineRecipe10({
 var inputText = defineSlotRecipe6({
   className: "input-text",
   description: "\u30A4\u30F3\u30D7\u30C3\u30C8\u30C6\u30AD\u30B9\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306F\u3001\u540D\u524D\u3084\u96FB\u8A71\u756A\u53F7\u306A\u3069\u30011\u884C\u4EE5\u5185\u306E\u30C6\u30AD\u30B9\u30C8\u3092\u5165\u529B\u3059\u308B\u5834\u5408\u306B\u4F7F\u7528\u3057\u307E\u3059\u3002",
-  slots: fieldAnatomy.keys(),
+  slots: inputTextAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -1463,7 +1451,7 @@ var list_default = defineRecipe12({
 
 // src/recipes/menu.ts
 import { defineSlotRecipe as defineSlotRecipe7 } from "@pandacss/dev";
-import { anatomy as menuAnatomy } from "@ark-ui/anatomy/menu";
+import { anatomy as menuAnatomy } from "@zag-js/menu";
 
 // src/recipes/menu-item.ts
 import { defineRecipe as defineRecipe13 } from "@pandacss/dev";
@@ -2201,7 +2189,7 @@ var radio_default = defineSlotRecipe10({
 
 // src/recipes/radio-group.ts
 import { defineSlotRecipe as defineSlotRecipe11 } from "@pandacss/dev";
-import { anatomy as radioGroupAnatomy } from "@ark-ui/anatomy/radio-group";
+import { anatomy as radioGroupAnatomy } from "@zag-js/radio-group";
 var radio_group_default = defineSlotRecipe11({
   className: "radio-group",
   slots: radioGroupAnatomy.keys(),
@@ -2419,7 +2407,7 @@ var resource_list_default = defineSlotRecipe12({
 
 // src/recipes/select.ts
 import { defineSlotRecipe as defineSlotRecipe13 } from "@pandacss/dev";
-import { anatomy as selectAnatomy } from "@ark-ui/anatomy/select";
+import { anatomy as selectAnatomy } from "@zag-js/select";
 var select_default = defineSlotRecipe13({
   className: "select",
   description: "\u30BB\u30EC\u30AF\u30C8\u30DC\u30C3\u30AF\u30B9\u306F\u3001\u8907\u6570\u306E\u9078\u629E\u80A2\u3092\u63D0\u4F9B\u3059\u308B\u30D5\u30A9\u30FC\u30E0\u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u3067\u3059\u3002",
@@ -2672,7 +2660,7 @@ var table_default = defineSlotRecipe14({
 
 // src/recipes/tabs.ts
 import { defineSlotRecipe as defineSlotRecipe15 } from "@pandacss/dev";
-import { anatomy as tabsAnatomy } from "@ark-ui/anatomy/tabs";
+import { anatomy as tabsAnatomy } from "@zag-js/tabs";
 var tabs_default = defineSlotRecipe15({
   className: "tabs",
   slots: tabsAnatomy.keys(),
@@ -2763,7 +2751,7 @@ var tabs_default = defineSlotRecipe15({
 
 // src/recipes/tree-view.ts
 import { defineSlotRecipe as defineSlotRecipe16 } from "@pandacss/dev";
-import { anatomy as treeViewAnatomy } from "@ark-ui/anatomy/tree-view";
+import { anatomy as treeViewAnatomy } from "@zag-js/tree-view";
 var tree_view_default = defineSlotRecipe16({
   className: "tree-view",
   slots: treeViewAnatomy.keys(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cieloazul310/digital-go-pandacss-preset",
-  "version": "0.0.0",
+  "version": "0.0.1-prerelease.1",
   "license": "MIT",
   "homepage": "https://github.com/cieloazul310/digital-go-design-system-with-panda",
   "author": {
@@ -16,6 +16,9 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "files": [
+    "dist"
+  ],
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "exports": {
@@ -36,20 +39,36 @@
     "format": "prettier --parser typescript --write ."
   },
   "dependencies": {
-    "@cieloazul310/digital-go-pandacss-plugin": "^0.0.0",
-    "@cieloazul310/digital-go-pandacss-utils": "^0.0.0"
+    "@cieloazul310/digital-go-pandacss-plugin": "^0.0.1-prerelease.1",
+    "@cieloazul310/digital-go-pandacss-utils": "^0.0.1-prerelease.1"
   },
   "devDependencies": {
-    "@ark-ui/anatomy": "^3.5.0",
     "@pandacss/dev": "^0.53.7",
     "@repo/eslint-config": "^0.0.0",
     "@repo/typescript-config": "^0.0.0",
+    "@zag-js/accordion": "^1.18.3",
+    "@zag-js/anatomy": "^1.18.3",
+    "@zag-js/checkbox": "^1.18.3",
+    "@zag-js/dialog": "^1.18.3",
+    "@zag-js/menu": "^1.18.3",
+    "@zag-js/radio-group": "^1.18.3",
+    "@zag-js/select": "^1.18.3",
+    "@zag-js/tabs": "^1.18.3",
+    "@zag-js/tree-view": "^1.18.3",
     "eslint": "^9.28.0",
     "tsup": "8.5.0",
     "typescript": "5.8.3"
   },
   "peerDependencies": {
-    "@ark-ui/anatomy": "^3.0.0"
+    "@zag-js/accordion": "^1.0.0",
+    "@zag-js/anatomy": "^1.0.0",
+    "@zag-js/checkbox": "^1.0.0",
+    "@zag-js/dialog": "^1.0.0",
+    "@zag-js/menu": "^1.0.0",
+    "@zag-js/radio-group": "^1.0.0",
+    "@zag-js/select": "^1.0.0",
+    "@zag-js/tabs": "^1.0.0",
+    "@zag-js/tree-view": "^1.0.0"
   },
   "lint-staged": {
     "**/*.{js,mjs,cjs,tsx,ts,tsx}": [

package/.turbo/turbo-build.log

@@ -1,20 +0,0 @@
-
-> @cieloazul310/digital-go-pandacss-preset@0.0.0 build
-> tsup
-
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.5.0
-CLI Using tsup config: /home/runner/work/digital-go-design-system-with-panda/digital-go-design-system-with-panda/packages/preset/tsup.config.ts
-CLI Target: es2022
-CLI Cleaning output folder
-ESM Build start
-CJS Build start
-CJS dist/index.js 79.11 KB
-CJS ⚡️ Build success in 46ms
-ESM dist/index.mjs 77.58 KB
-ESM ⚡️ Build success in 46ms
-DTS Build start
-DTS ⚡️ Build success in 3571ms
-DTS dist/index.d.mts 248.00 B
-DTS dist/index.d.ts  248.00 B

package/eslint.config.mjs

@@ -1,6 +0,0 @@
-import libraryConfig from "@repo/eslint-config/library";
-
-/**
- * @type {import("eslint").Linter.Config}
- */
-export default [...libraryConfig];

package/src/anatomy.ts

@@ -1,41 +0,0 @@
-/**
- * https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/anatomy.ts
- */
-import { createAnatomy } from "@ark-ui/react/anatomy";
-
-export const breadcrumbAnatomy = createAnatomy("breadcrumb").parts(
-  "root",
-  "list",
-  "item",
-  "link",
-  "separator",
-);
-
-export const menuListAnatomy = createAnatomy("menu-list").parts(
-  "root",
-  "label",
-  "content",
-  "item",
-  "itemGroup",
-  "itemGroupLabel",
-  "itemText",
-  "itemIndicator",
-  "input",
-);
-
-export const notificationBannerAnatomy = createAnatomy(
-  "notification-banner",
-).parts("root", "icon", "close", "header", "heading", "body");
-
-export const resourceListAnatomy = createAnatomy("resource-list").parts(
-  "root",
-  "contentsContainer",
-  "functionButton",
-  "frontIcon",
-  "form",
-  "content",
-  "label",
-  "title",
-  "supportText",
-  "subLabel",
-);

package/src/index.ts

@@ -1,32 +0,0 @@
-import { definePreset, type Preset } from "@pandacss/dev";
-import presetBase from "@cieloazul310/digital-go-pandacss-plugin";
-import {
-  createKeyColor,
-  type Palette,
-} from "@cieloazul310/digital-go-pandacss-utils";
-import recipes from "./recipes";
-
-const base = {
-  name: "digital-go-pandacss-preset",
-  presets: [presetBase],
-  theme: {
-    recipes,
-  },
-} satisfies Preset;
-
-export default definePreset(base);
-
-export const createPreset = (keyColor?: Palette) =>
-  definePreset({
-    ...base,
-    theme: {
-      ...base.theme,
-      extend: {
-        semanticTokens: {
-          colors: {
-            keyColor: createKeyColor(keyColor ?? "blue"),
-          },
-        },
-      },
-    },
-  });

package/src/recipes/accordion.ts

@@ -1,128 +0,0 @@
-/**
- * source:
- * https://github.com/digital-go-jp/design-system-example-components/blob/main/src/components/Accordion/Accordion.tsx
- */
-import { defineSlotRecipe } from "@pandacss/dev";
-import { anatomy as accordionAnatomy } from "@ark-ui/anatomy/accordion";
-
-export default defineSlotRecipe({
-  className: "accordion",
-  slots: accordionAnatomy.keys(),
-  base: {
-    item: {
-      /**
-       * group/accordion border-b border-solid-gray-420
-        [--icon-size:calc(20/16*1rem)] desktop:[--icon-size:calc(32/16*1rem)]
-        ${className ?? ''}
-       */
-      borderBottomWidth: "1px",
-      borderBottomColor: "solid-gray.420",
-      "--icon-size": {
-        base: "calc(20 / 16 * 1rem)",
-        md: "calc(32 / 16 * 1rem)",
-      },
-    },
-    itemTrigger: {
-      /**
-       * group/summary relative block cursor-default
-       */
-      position: "relative",
-      display: "block",
-      /**
-       * hover:bg-solid-gray-50
-       * focus-visible:bg-yellow-300
-       */
-      bg: {
-        base: "transparent",
-        _hover: "solid-gray.50",
-        _focusVisible: { base: "yellow.300", _hover: "yellow.300" },
-      },
-      /*
-       * py-2 pl-[calc(var(--icon-size)+(12/16*1rem))] pr-2
-       * desktop:py-3.5 desktop:pl-[calc(var(--icon-size)+(20/16*1rem))] desktop:pr-4
-       */
-      py: { base: 2, md: 3.5 },
-      pl: {
-        base: "calc(var(--icon-size) + (12 / 16 * 1rem))",
-        md: "calc(var(--icon-size) + (20 / 16 * 1rem))",
-      },
-      pr: { base: 2, md: 4 },
-      cursor: { _hover: "pointer" },
-      /**
-       * marker:[content:'']
-        [&::-webkit-details-marker]:hidden
-       */
-      "&::marker": { content: '""' },
-      /**
-       * focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:outline-black focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
-       */
-      _focusVisible: {
-        rounded: 4,
-        outlineStyle: "solid",
-        outlineWidth: "4px",
-        outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusRing: "calc(2 / 16 * 1rem)",
-      },
-      /**
-       * remove button style
-       */
-      textAlign: "start",
-      width: "full",
-    },
-    itemIndicator: {
-      /**
-       * absolute top-2 left-0.5
-       * desktop:top-3.5 desktop:left-1.5
-       * size-[var(--icon-size)]
-       * mt-[calc((1lh-var(--icon-size))/2)]
-       */
-      position: "absolute",
-      top: { base: 2, md: 3.5 },
-      left: { base: 0.5, md: 1.5 },
-      width: "var(--icon-size)",
-      height: "var(--icon-size)",
-      mt: "calc((1lh - var(--icon-size)) / 2)",
-      /**
-       * inline-flex items-center justify-center
-       */
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      /**
-       * bg-white text-blue-1000
-       */
-      bg: "white",
-      color: "keyColor.1000",
-      /**
-       * border border-current rounded-full
-          group-hover/summary:outline group-hover/summary:outline-2 group-hover/summary:outline-current
-          group-open/accordion:rotate-180
-       */
-      borderWidth: "1px",
-      borderColor: "currentcolor",
-      rounded: "full",
-      outlineStyle: "solid",
-      outlineWidth: { base: "0px", _groupHover: "2px" },
-      transformOrigin: "center",
-      transitionDuration: "normal",
-      transitionProperty: "transform",
-      transitionTimingFunction: "default",
-      _open: {
-        transform: "rotate(-180deg)",
-      },
-    },
-    itemContent: {
-      /**
-       * pl-[calc(var(--icon-size)+(12/16*1rem))] pr-2 py-4
-        desktop:pl-[calc(var(--icon-size)+(20/16*1rem))] desktop:pr-4 desktop:py-6
-       */
-      pl: {
-        base: "calc(var(--icon-size) + (12 / 16 * 1rem))",
-        md: "calc(var(--icon-size) + (20 / 16 * 1rem))",
-      },
-      pr: { base: 2, md: 4 },
-      py: { base: 4, md: 6 },
-    },
-  },
-});