@sk-web-gui/core 0.1.93 → 1.0.1

package/dist/esm/components/card.js

@@ -1,44 +1,197 @@
-module.exports = Card = () => ({
-  '.avatar': {
-    '@apply bg-primary-light text-primary rounded-full p-4': {}
-  },
-  '.card-list': {
-    '@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10': {}
-    //"@apply text-center": {},
-    //"@apply justify-center items-center": {},
-  },
-
-  '.card': {
-    '@apply p-lg rounded shadow-lg bg-white relative': {},
-    '@apply p-0': {},
-    //padding: "2.4rem",
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+module.exports = Card = colors => ({
+  '.sk-card': _extends({
+    '@apply bg-white relative rounded-b-cards rounded-cards': {},
+    '@apply flex flex-col': {},
+    '@apply no-underline hover:no-underline': {},
+    '@apply h-[100%]': {},
+    '&-wrapper': {
+      '@apply grid': {}
+    },
+    '&-image': {
+      '@apply object-cover grow': {},
+      '@apply rounded-t-cards': {}
+    },
+    '&-body': {
+      '@apply px-24 pb-24 pt-16 rounded-b-cards': {},
+      '@apply shrink': {},
+      '&-wrapper': {
+        '@apply flex': {}
+      },
+      '&-meta': {
+        '@apply flex space-x-12 mt-16': {},
+        span: {
+          '@apply flex space-x-4 items-center': {},
+          time: {
+            '@apply h-[23px] leading-[24px]': {}
+          }
+        },
+        '&.sk-card-image': {
+          backgroundColor: 'green',
+          '@apply h-[278px]': {}
+        }
+      },
+      '&-header': {
+        'h1, h2, h3, h4, h5, h6, h7, a': {
+          '@apply line-clamp-1 text-h3-md text-dark-primary mt-16': {}
+        },
+        span: {
+          '@apply pl-12': {}
+        }
+      },
+      '&-content': {
+        '@apply w-full': {},
+        'p, a': {
+          '@apply line-clamp-3 m-0 pt-8 text-base': {}
+        }
+      },
+      '&-icon': {
+        '@apply hidden': {}
+      }
+    }
+  }, colors.reduce((styles, color) => _extends({}, styles, {
+    '&[data-color="mono"], &[data-color="tertiary"]': {
+      '@apply border-solid border-1': {},
+      '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},
+      '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},
+      '.sk-card-body-meta': {
+        '@apply text-dark-secondary': {}
+      },
+      '.sk-card-body-icon': {
+        '@apply bg-primitives-overlay-darken-9 dark:bg-primitives-overlay-lighten-10': {},
+        '@apply text-primitives-gray-lightest dark:text-primitives-overlay-darken-9': {},
+        '@apply hover:bg-primitives-overlay-darken-10 dark:hover:bg-primitives-gray-lightest': {}
+      },
+      // inverted.
+      ["&[data-inverted=\"true\"]"]: {
+        '@apply bg-primitives-gray-800': {},
+        '.sk-card-body': {
+          // Meta
+          '&-meta': {
+            span: {
+              '@apply text-light-secondary': {}
+            }
+          },
+          // header
+          '&-header': {
+            'h1, h2, h3, h4, h5, h6, h7, a': {
+              ["@apply text-light-primary"]: {}
+            }
+          },
+          // Content
+          '&-content': {
+            'p, a': {
+              ["@apply text-light-secondary"]: {}
+            }
+          },
+          '.sk-card-body-icon': {
+            '@apply bg-primitives-overlay-lighten-10 text-primitives-gray-900': {},
+            '@apply hover:bg-primitives-gray-lightest': {}
+          }
+        }
+      }
+    },
+    '&[data-color="tertiary"]': {
+      '@apply border-solid border-1': {},
+      '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},
+      '@apply bg-primitives-gray-50 dark:bg-primitives-gray-700': {}
+    },
+    ["&[data-color=\"" + color + "\"]"]: {
+      // card
+      ["@apply bg-" + color + "-surface-primary-hover"]: {},
+      // clickable
+      '&.sk-card-use-hover-effect': {
+        // hover
+        ["@apply hover:cursor-pointer hover:bg-" + color + "-surface-primary"]: {}
+      },
+      // Meta
+      '.sk-card-body': {
+        '&-meta': {
+          span: {
+            '@apply text-light-secondary': {}
+          }
+        },
+        // header
+        '&-header': {
+          'h1, h2, h3, h4, h5, h6, h7, a': {
+            ["@apply text-light-primary"]: {}
+          }
+        },
+        // Content
+        '&-content': {
+          'p, a': {
+            ["@apply text-light-secondary"]: {}
+          }
+        }
+      },
+      // inverted.
+      ["&[data-inverted=\"true\"]"]: {
+        // card
+        ["@apply bg-" + color + "-surface-accent-hover"]: {},
+        // clickable
+        '&.sk-card-use-hover-effect': {
+          // hover
+          ["@apply hover:cursor-pointer hover:bg-" + color + "-surface-accent"]: {}
+        },
+        '.sk-card-body': {
+          // Meta
+          '&-meta': {
+            span: {
+              '@apply text-dark-secondary': {}
+            }
+          },
+          // header
+          '&-header': {
+            'h1, h2, h3, h4, h5, h6, h7, a': {
+              ["@apply text-dark-primary"]: {}
+            }
+          },
+          // Content
+          '&-content': {
+            'p, a': {
+              ["@apply text-dark-secondary"]: {}
+            }
+          }
+        }
+      }
+    }
+  }), {}), {
     // clickable
-    '&-clickable': {
-      // Hover
-      '@apply hover:shadow-xl hover:cursor-pointer': {}
+    '&.sk-card-use-hover-effect': {
+      //Hide and show of icon
+      '.sk-card-body-icon': {
+        '@apply inline-flex': {},
+        '@apply mt-auto mb-auto mr-24': {}
+      }
+    },
+    ["&[data-layout=\"horizontal\"]"]: {
+      '@apply flex-row h-[100%]': {},
+      '.sk-card': {
+        '&-image': {
+          '@apply h-[100%] w-[128px]': {},
+          '@apply float-left': {},
+          '@apply rounded-none rounded-l-cards grow-0': {}
+        },
+        '&-body': {
+          '@apply w-[100%]': {},
+          '@apply border-none': {},
+          '&-wrapper': {
+            '@apply w-[100%]': {}
+          },
+          '&-content': {
+            'p, a': {
+              '@apply text-small': {}
+            }
+          },
+          '&-meta': {
+            '@apply hidden': {}
+          }
+        }
+      }
     }
-
-    // "@apply bg-neutral-200 border border-neutral-100 text-body": {},
-    // dark
-    //"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
-  },
-
-  '.card-outlined': {
-    '@apply border-2 border-gray-stroke': {}
-  },
-  '.card-border-top': {
-    '@apply border-t-4 border-t-primary': {}
-  },
-  '.card-body': {
-    '@apply text-body p-8': {}
-  },
-  '.card-image': {
-    '@apply object-cover': {},
-    width: '100%',
-    height: '250px'
-  },
-  '.card-link': {
+  }),
+  '.sk-card-link': {
+    '@apply hover:cursor-pointer': {},
     '&::after': {
       content: "''",
       position: 'absolute',
@@ -47,6 +200,47 @@ module.exports = Card = () => ({
       right: '0',
       bottom: '0'
     }
+  },
+  /**
+   * Meta card
+   */
+  '.sk-meta-card': {
+    '@apply no-underline hover:no-underline': {},
+    '@apply flex bg-vattjom-surface-accent': {},
+    '@apply p-14 rounded-16 w-[454px]': {},
+    '&[data-color="mono"]': {
+      '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {}
+    },
+    '&[data-color="vattjom"]': {
+      '@apply bg-vattjom-background-200': {}
+    },
+    '&-text-icon': {
+      '@apply mr-12 rounded-12 p-8': {},
+      '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},
+      '@apply text-dark': {},
+      svg: {
+        height: 'unset',
+        width: 'unset'
+      }
+    },
+    '&-body': {
+      '&-header': {
+        'h1, h2, h3, h4, h5, h6, h7, a, p': {
+          '@apply mt-6 text-base line-clamp-1': {},
+          '@apply text-dark-primary': {}
+        }
+      },
+      '&-content': {
+        'p, a': {
+          '@apply text-primitives-gray-700 dark:text-primitives-gray-200': {},
+          '@apply text-dark-secondary line-clamp-1': {}
+        }
+      }
+    },
+    '&-external-link-icon': {
+      '@apply ml-auto h-[32px] w-[32px]': {},
+      '@apply p-6 text-dark': {}
+    }
   }
 });
 //# sourceMappingURL=card.js.map

package/dist/esm/components/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":["module","exports","Card","width","height","content","position","left","top","right","bottom"],"sources":["../../../src/components/card.js"],"sourcesContent":["module.exports = Card = () => ({\r\n  '.avatar': {\r\n    '@apply bg-primary-light text-primary rounded-full p-4': {},\r\n  },\r\n\r\n  '.card-list': {\r\n    '@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10': {},\r\n    //\"@apply text-center\": {},\r\n    //\"@apply justify-center items-center\": {},\r\n  },\r\n\r\n  '.card': {\r\n    '@apply p-lg rounded shadow-lg bg-white relative': {},\r\n    '@apply p-0': {},\r\n    //padding: \"2.4rem\",\r\n\r\n    // clickable\r\n    '&-clickable': {\r\n      // Hover\r\n      '@apply hover:shadow-xl hover:cursor-pointer': {},\r\n    },\r\n\r\n    // \"@apply bg-neutral-200 border border-neutral-100 text-body\": {},\r\n    // dark\r\n    //\"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300\": {},\r\n  },\r\n  '.card-outlined': {\r\n    '@apply border-2 border-gray-stroke': {},\r\n  },\r\n  '.card-border-top': {\r\n    '@apply border-t-4 border-t-primary': {},\r\n  },\r\n\r\n  '.card-body': {\r\n    '@apply text-body p-8': {},\r\n  },\r\n\r\n  '.card-image': {\r\n    '@apply object-cover': {},\r\n    width: '100%',\r\n    height: '250px',\r\n  },\r\n\r\n  '.card-link': {\r\n    '&::after': {\r\n      content: \"''\",\r\n      position: 'absolute',\r\n      left: '0',\r\n      top: '0',\r\n      right: '0',\r\n      bottom: '0',\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,IAAI,GAAGA,CAAA,MAAO;EAC7B,SAAS,EAAE;IACT,uDAAuD,EAAE,CAAC;EAC5D,CAAC;EAED,YAAY,EAAE;IACZ,8DAA8D,EAAE,CAAC;IACjE;IACA;EACF,CAAC;;EAED,OAAO,EAAE;IACP,iDAAiD,EAAE,CAAC,CAAC;IACrD,YAAY,EAAE,CAAC,CAAC;IAChB;;IAEA;IACA,aAAa,EAAE;MACb;MACA,6CAA6C,EAAE,CAAC;IAClD;;IAEA;IACA;IACA;EACF,CAAC;;EACD,gBAAgB,EAAE;IAChB,oCAAoC,EAAE,CAAC;EACzC,CAAC;EACD,kBAAkB,EAAE;IAClB,oCAAoC,EAAE,CAAC;EACzC,CAAC;EAED,YAAY,EAAE;IACZ,sBAAsB,EAAE,CAAC;EAC3B,CAAC;EAED,aAAa,EAAE;IACb,qBAAqB,EAAE,CAAC,CAAC;IACzBC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACV,CAAC;EAED,YAAY,EAAE;IACZ,UAAU,EAAE;MACVC,OAAO,EAAE,IAAI;MACbC,QAAQ,EAAE,UAAU;MACpBC,IAAI,EAAE,GAAG;MACTC,GAAG,EAAE,GAAG;MACRC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV;EACF;AACF,CAAC,CAAC"}
+{"version":3,"file":"card.js","names":["module","exports","Card","colors","_extends","span","time","backgroundColor","reduce","styles","color","content","position","left","top","right","bottom","svg","height","width"],"sources":["../../../src/components/card.js"],"sourcesContent":["module.exports = Card = (colors) => ({\r\n  '.sk-card': {\r\n    '@apply bg-white relative rounded-b-cards rounded-cards': {},\r\n    '@apply flex flex-col': {},\r\n    '@apply no-underline hover:no-underline': {},\r\n    '@apply h-[100%]': {},\r\n\r\n    '&-wrapper': {\r\n      '@apply grid': {},\r\n    },\r\n\r\n    '&-image': {\r\n      '@apply object-cover grow': {},\r\n      '@apply rounded-t-cards': {},\r\n    },\r\n\r\n    '&-body': {\r\n      '@apply px-24 pb-24 pt-16 rounded-b-cards': {},\r\n      '@apply shrink': {},\r\n\r\n      '&-wrapper': {\r\n        '@apply flex': {},\r\n      },\r\n\r\n      '&-meta': {\r\n        '@apply flex space-x-12 mt-16': {},\r\n        span: {\r\n          '@apply flex space-x-4 items-center': {},\r\n          time: {\r\n            '@apply h-[23px] leading-[24px]': {},\r\n          },\r\n        },\r\n\r\n        '&.sk-card-image': {\r\n          backgroundColor: 'green',\r\n          '@apply h-[278px]': {},\r\n        },\r\n      },\r\n\r\n      '&-header': {\r\n        'h1, h2, h3, h4, h5, h6, h7, a': {\r\n          '@apply line-clamp-1 text-h3-md text-dark-primary mt-16': {},\r\n        },\r\n        span: {\r\n          '@apply pl-12': {},\r\n        },\r\n      },\r\n\r\n      '&-content': {\r\n        '@apply w-full': {},\r\n        'p, a': {\r\n          '@apply line-clamp-3 m-0 pt-8 text-base': {},\r\n        },\r\n      },\r\n\r\n      '&-icon': {\r\n        '@apply hidden': {},\r\n      },\r\n    },\r\n\r\n    ...colors.reduce(\r\n      (styles, color) => ({\r\n        ...styles,\r\n\r\n        '&[data-color=\"mono\"], &[data-color=\"tertiary\"]': {\r\n          '@apply border-solid border-1': {},\r\n          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},\r\n          '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},\r\n\r\n          '.sk-card-body-meta': {\r\n            '@apply text-dark-secondary': {},\r\n          },\r\n\r\n          '.sk-card-body-icon': {\r\n            '@apply bg-primitives-overlay-darken-9 dark:bg-primitives-overlay-lighten-10': {},\r\n            '@apply text-primitives-gray-lightest dark:text-primitives-overlay-darken-9': {},\r\n            '@apply hover:bg-primitives-overlay-darken-10 dark:hover:bg-primitives-gray-lightest': {},\r\n          },\r\n\r\n          // inverted.\r\n          [`&[data-inverted=\"true\"]`]: {\r\n            '@apply bg-primitives-gray-800': {},\r\n\r\n            '.sk-card-body': {\r\n              // Meta\r\n              '&-meta': {\r\n                span: {\r\n                  '@apply text-light-secondary': {},\r\n                },\r\n              },\r\n\r\n              // header\r\n              '&-header': {\r\n                'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                  [`@apply text-light-primary`]: {},\r\n                },\r\n              },\r\n\r\n              // Content\r\n              '&-content': {\r\n                'p, a': {\r\n                  [`@apply text-light-secondary`]: {},\r\n                },\r\n              },\r\n\r\n              '.sk-card-body-icon': {\r\n                '@apply bg-primitives-overlay-lighten-10 text-primitives-gray-900': {},\r\n                '@apply hover:bg-primitives-gray-lightest': {},\r\n              },\r\n            },\r\n          },\r\n        },\r\n\r\n        '&[data-color=\"tertiary\"]': {\r\n          '@apply border-solid border-1': {},\r\n          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},\r\n          '@apply bg-primitives-gray-50 dark:bg-primitives-gray-700': {},\r\n        },\r\n\r\n        [`&[data-color=\"${color}\"]`]: {\r\n          // card\r\n          [`@apply bg-${color}-surface-primary-hover`]: {},\r\n\r\n          // clickable\r\n          '&.sk-card-use-hover-effect': {\r\n            // hover\r\n            [`@apply hover:cursor-pointer hover:bg-${color}-surface-primary`]: {},\r\n          },\r\n\r\n          // Meta\r\n          '.sk-card-body': {\r\n            '&-meta': {\r\n              span: {\r\n                '@apply text-light-secondary': {},\r\n              },\r\n            },\r\n\r\n            // header\r\n            '&-header': {\r\n              'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                [`@apply text-light-primary`]: {},\r\n              },\r\n            },\r\n\r\n            // Content\r\n            '&-content': {\r\n              'p, a': {\r\n                [`@apply text-light-secondary`]: {},\r\n              },\r\n            },\r\n          },\r\n\r\n          // inverted.\r\n          [`&[data-inverted=\"true\"]`]: {\r\n            // card\r\n            [`@apply bg-${color}-surface-accent-hover`]: {},\r\n\r\n            // clickable\r\n            '&.sk-card-use-hover-effect': {\r\n              // hover\r\n              [`@apply hover:cursor-pointer hover:bg-${color}-surface-accent`]: {},\r\n            },\r\n\r\n            '.sk-card-body': {\r\n              // Meta\r\n              '&-meta': {\r\n                span: {\r\n                  '@apply text-dark-secondary': {},\r\n                },\r\n              },\r\n\r\n              // header\r\n              '&-header': {\r\n                'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                  [`@apply text-dark-primary`]: {},\r\n                },\r\n              },\r\n\r\n              // Content\r\n              '&-content': {\r\n                'p, a': {\r\n                  [`@apply text-dark-secondary`]: {},\r\n                },\r\n              },\r\n            },\r\n          },\r\n        },\r\n      }),\r\n      {}\r\n    ),\r\n\r\n    // clickable\r\n    '&.sk-card-use-hover-effect': {\r\n      //Hide and show of icon\r\n      '.sk-card-body-icon': {\r\n        '@apply inline-flex': {},\r\n        '@apply mt-auto mb-auto mr-24': {},\r\n      },\r\n    },\r\n\r\n    [`&[data-layout=\"horizontal\"]`]: {\r\n      '@apply flex-row h-[100%]': {},\r\n\r\n      '.sk-card': {\r\n        '&-image': {\r\n          '@apply h-[100%] w-[128px]': {},\r\n          '@apply float-left': {},\r\n          '@apply rounded-none rounded-l-cards grow-0': {},\r\n        },\r\n\r\n        '&-body': {\r\n          '@apply w-[100%]': {},\r\n          '@apply border-none': {},\r\n\r\n          '&-wrapper': {\r\n            '@apply w-[100%]': {},\r\n          },\r\n\r\n          '&-content': {\r\n            'p, a': {\r\n              '@apply text-small': {},\r\n            },\r\n          },\r\n\r\n          '&-meta': {\r\n            '@apply hidden': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  },\r\n\r\n  '.sk-card-link': {\r\n    '@apply hover:cursor-pointer': {},\r\n\r\n    '&::after': {\r\n      content: \"''\",\r\n      position: 'absolute',\r\n      left: '0',\r\n      top: '0',\r\n      right: '0',\r\n      bottom: '0',\r\n    },\r\n  },\r\n\r\n  /**\r\n   * Meta card\r\n   */\r\n  '.sk-meta-card': {\r\n    '@apply no-underline hover:no-underline': {},\r\n    '@apply flex bg-vattjom-surface-accent': {},\r\n    '@apply p-14 rounded-16 w-[454px]': {},\r\n\r\n    '&[data-color=\"mono\"]': {\r\n      '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {},\r\n    },\r\n\r\n    '&[data-color=\"vattjom\"]': {\r\n      '@apply bg-vattjom-background-200': {},\r\n    },\r\n\r\n    '&-text-icon': {\r\n      '@apply mr-12 rounded-12 p-8': {},\r\n      '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},\r\n      '@apply text-dark': {},\r\n      svg: {\r\n        height: 'unset',\r\n        width: 'unset',\r\n      },\r\n    },\r\n\r\n    '&-body': {\r\n      '&-header': {\r\n        'h1, h2, h3, h4, h5, h6, h7, a, p': {\r\n          '@apply mt-6 text-base line-clamp-1': {},\r\n          '@apply text-dark-primary': {},\r\n        },\r\n      },\r\n\r\n      '&-content': {\r\n        'p, a': {\r\n          '@apply text-primitives-gray-700 dark:text-primitives-gray-200': {},\r\n          '@apply text-dark-secondary line-clamp-1': {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-external-link-icon': {\r\n      '@apply ml-auto h-[32px] w-[32px]': {},\r\n      '@apply p-6 text-dark': {},\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}

package/dist/esm/components/checkbox.js

@@ -1,117 +1,107 @@
-var svgToDataUri = require('mini-svg-data-uri');
-module.exports = Checkbox = colors => ({
-  '.form-checkbox': {
-    //"@apply rounded shadow-sm": {},
-    backgroundColor: 'inherit',
-    '@apply border-gray-stroke focus:bg-white': {},
-    '&[aria-invalid=true]': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))'
-    },
-    '&[aria-invalid=true]:hover': {
-      '--tw-border-opacity': '1',
-      'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))'
+module.exports = Checkbox = () => ({
+  '.sk-form-checkbox': {
+    '@apply bg-inherit': {},
+    '@apply rounded-utility': {},
+    '@apply bg-transparent border-transparent': {},
+    // sizing
+    '&-sm': {
+      '@apply w-[2.4rem] h-[2.4rem]': {}
     },
-    // dark colors
-    '@apply dark:border-neutral-400': {},
-    '.dark &[aria-invalid=true]': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))'
+    '&-md': {
+      '@apply w-[2.4rem] h-[2.4rem]': {}
     },
-    '.dark &[aria-invalid=true]:hover': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))'
+    '&-lg': {
+      '@apply w-[2.4rem] h-[2.4rem]': {}
     },
-    '@media (prefers-color-scheme: dark)': {
-      '&[aria-invalid=true]': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))'
-      },
-      '&[aria-invalid=true]:hover': {
-        '--tw-border-opacity': '1',
-        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))'
+    '+ .sk-icon': {
+      '@apply absolute inset-0 my-auto bg-transparent': {},
+      '@apply border-[0.1rem] p-2 border-primitives-overlay-darken-6 dark:border-primitives-overlay-lighten-6': {},
+      '@apply bg-primitives-overlay-lighten-10 dark:bg-primitives-overlay-darken-6': {},
+      svg: {
+        '@apply hidden': {}
       }
     },
-    '&:checked': {
-      '@apply text-white bg-white border-primary': {},
-      ["@apply focus-visible:border-primary focus-visible:ring-primary"]: {},
-      backgroundImage: "url(\"" + svgToDataUri("<svg viewBox=\"0 0 16 16\" fill=\"#005595\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"/></svg>") + "\")"
-      //borderColor: "transparent",
-    },
-
-    ["&[data-color=\"primary\"]"]: {
-      //[`@apply text-primary`]: {},
-      // dark
-      //[`@apply dark:text-primary`]: {},
-      //[`@apply dark:focus-visible:border-primary-400 dark:focus-visible:ring-primary-400`]: {},
-    },
-    // Fix focus stylign
-    '&:checked:hover, &:checked:focus': {
-      '@apply bg-white border-primary': {}
-    },
-    // colors
-    /*...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          [`@apply text-${color}`]: {},
-          [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
-          backgroundImage: `url("${svgToDataUri(
-            `<svg viewBox="0 0 16 16" fill="${theme(`colors.primary_raw.DEFAULT`)}" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
-          )}")`,
-          // dark
-          [`@apply dark:text-${color}`]: {},
-          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
-        },
-      }),
-      {}
-    ),*/
-
-    '@apply dark:focus-visible:ring-offset-neutral-900': {},
-    // sizing
-    '&-sm': {
-      width: '1.4rem',
-      height: '1.4rem'
+    '&&:checked': {
+      '@apply text-light-primary bg-none': {},
+      '& + .sk-icon': {
+        '@apply text-light-primary bg-dark-primary border-dark-primary': {},
+        svg: {
+          '@apply block': {}
+        }
+      }
     },
-    '&-md': {
-      width: '1.6rem',
-      height: '1.6rem'
-      //"@apply w-4 h-4": {},
+    '&&:hover:not(&&-disabled,&&:checked,&&[aria-invalid=true]),&&:hover:focus:not(&&-disabled,&&:checked,&&[aria-invalid=true])': {
+      '& + .sk-icon, &:focus + .sk-icon': {
+        '@apply text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-5 border-primitives-overlay-darken-8 dark:border-primitives-overlay-lighten-4': {},
+        svg: {
+          '@apply block': {}
+        }
+      }
     },
-
-    '&-lg': {
-      width: '1.8rem',
-      height: '1.8rem'
+    '&&[aria-invalid=true]': {
+      '& + .sk-icon': {
+        '@apply border-2 border-error-surface-primary': {}
+      },
+      '&&:checked': {
+        '& + .sk-icon': {
+          '@apply p-2 bg-background-content text-dark-primary': {},
+          svg: {
+            '@apply block': {}
+          }
+        }
+      }
     },
     // disabled
-    '&-disabled, &-disabled:checked': {
-      '@apply grayscale cursor-not-allowed bg-gray-middle hover:bg-gray-middle': {}
-      //"@apply disabled:bg-gray-stroke": {},
-      //"@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300": {},
-      //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20": {},
+    '&&-disabled,&&-disabled:hover': {
+      '@apply cursor-not-allowed': {},
+      '& + .sk-icon': {
+        '@apply bg-background-200 border-primitives-overlay-darken-3': {}
+      },
+      '&:checked': {
+        '& + .sk-icon': {
+          '@apply bg-dark-disabled text-light-primary border-0': {}
+        }
+      },
+      '& ~ .sk-form-checkbox-label': {
+        '@apply text-dark-disabled': {}
+      }
     },
-
     // label
     '&-label-left &-label': {
-      marginRight: '0.8rem'
+      '@apply mr-[.8rem]': {}
     },
     '&-label-right &-label': {
-      marginLeft: '0.8rem'
+      '@apply ml-[.8rem]': {}
+    },
+    '&-label-left': {
+      '.sk-icon': {
+        '@apply left-auto right-0': {}
+      }
+    },
+    '&-label-right': {
+      '.sk-icon': {
+        '@apply right-auto left-0': {}
+      }
     },
     '&-label': {
-      '@apply text-body select-none text-sm': {},
-      // marginLeft: '0.8rem',
-      //"@apply text-black": {},
-      // dark colors
-      '@apply dark:text-neutral-100': {},
+      '@apply font-normal text-body select-none text-small': {},
+      '&-wrapper': {
+        '@apply relative inline-flex align-top items-center cursor-base': {}
+      },
       '&-sm': {
-        '@apply text-xs': {}
+        '@apply text-small': {}
       },
       '&-md': {
-        '@apply text-sm': {}
+        '@apply text-base': {}
       },
       '&-lg': {
-        '@apply text-base': {}
+        '@apply text-large': {}
+      }
+    },
+    '&-group': {
+      '@apply flex flex-col gap-16 my-12': {},
+      '&[data-direction="row"]': {
+        '@apply flex-row': {}
       }
     }
   }

package/dist/esm/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["svgToDataUri","require","module","exports","Checkbox","colors","backgroundColor","borderColor","backgroundImage","width","height","marginRight","marginLeft"],"sources":["../../../src/components/checkbox.js"],"sourcesContent":["const svgToDataUri = require('mini-svg-data-uri');\r\n\r\nmodule.exports = Checkbox = (colors) => ({\r\n  '.form-checkbox': {\r\n    //\"@apply rounded shadow-sm\": {},\r\n    backgroundColor: 'inherit',\r\n    '@apply border-gray-stroke focus:bg-white': {},\r\n\r\n    '&[aria-invalid=true]': {\r\n      '--tw-border-opacity': '1',\r\n      borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n    },\r\n    '&[aria-invalid=true]:hover': {\r\n      '--tw-border-opacity': '1',\r\n      'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n    },\r\n    // dark colors\r\n    '@apply dark:border-neutral-400': {},\r\n    '.dark &[aria-invalid=true]': {\r\n      '--tw-border-opacity': '1',\r\n      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',\r\n    },\r\n    '.dark &[aria-invalid=true]:hover': {\r\n      '--tw-border-opacity': '1',\r\n      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',\r\n    },\r\n\r\n    '@media (prefers-color-scheme: dark)': {\r\n      '&[aria-invalid=true]': {\r\n        '--tw-border-opacity': '1',\r\n        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n      },\r\n      '&[aria-invalid=true]:hover': {\r\n        '--tw-border-opacity': '1',\r\n        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',\r\n      },\r\n    },\r\n\r\n    '&:checked': {\r\n      '@apply text-white bg-white border-primary': {},\r\n      [`@apply focus-visible:border-primary focus-visible:ring-primary`]: {},\r\n\r\n      backgroundImage: `url(\"${svgToDataUri(\r\n        `<svg viewBox=\"0 0 16 16\" fill=\"#005595\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"/></svg>`\r\n      )}\")`,\r\n      //borderColor: \"transparent\",\r\n    },\r\n\r\n    [`&[data-color=\"primary\"]`]: {\r\n      //[`@apply text-primary`]: {},\r\n      // dark\r\n      //[`@apply dark:text-primary`]: {},\r\n      //[`@apply dark:focus-visible:border-primary-400 dark:focus-visible:ring-primary-400`]: {},\r\n    },\r\n\r\n    // Fix focus stylign\r\n    '&:checked:hover, &:checked:focus': {\r\n      '@apply bg-white border-primary': {},\r\n    },\r\n\r\n    // colors\r\n    /*...colors.reduce(\r\n      (styles, color) => ({\r\n        ...styles,\r\n        [`&[data-color=\"${color}\"]`]: {\r\n          [`@apply text-${color}`]: {},\r\n          [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},\r\n          backgroundImage: `url(\"${svgToDataUri(\r\n            `<svg viewBox=\"0 0 16 16\" fill=\"${theme(`colors.primary_raw.DEFAULT`)}\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"/></svg>`\r\n          )}\")`,\r\n          // dark\r\n          [`@apply dark:text-${color}`]: {},\r\n          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},\r\n        },\r\n      }),\r\n      {}\r\n    ),*/\r\n\r\n    '@apply dark:focus-visible:ring-offset-neutral-900': {},\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      width: '1.4rem',\r\n      height: '1.4rem',\r\n    },\r\n\r\n    '&-md': {\r\n      width: '1.6rem',\r\n      height: '1.6rem',\r\n      //\"@apply w-4 h-4\": {},\r\n    },\r\n\r\n    '&-lg': {\r\n      width: '1.8rem',\r\n      height: '1.8rem',\r\n    },\r\n\r\n    // disabled\r\n    '&-disabled, &-disabled:checked': {\r\n      '@apply grayscale cursor-not-allowed bg-gray-middle hover:bg-gray-middle': {},\r\n      //\"@apply disabled:bg-gray-stroke\": {},\r\n      //\"@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300\": {},\r\n      //\"@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20\": {},\r\n    },\r\n\r\n    // label\r\n    '&-label-left &-label': {\r\n      marginRight: '0.8rem',\r\n    },\r\n    '&-label-right &-label': {\r\n      marginLeft: '0.8rem',\r\n    },\r\n\r\n    '&-label': {\r\n      '@apply text-body select-none text-sm': {},\r\n      // marginLeft: '0.8rem',\r\n      //\"@apply text-black\": {},\r\n      // dark colors\r\n      '@apply dark:text-neutral-100': {},\r\n\r\n      '&-sm': {\r\n        '@apply text-xs': {},\r\n      },\r\n\r\n      '&-md': {\r\n        '@apply text-sm': {},\r\n      },\r\n\r\n      '&-lg': {\r\n        '@apply text-base': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAA,IAAMA,YAAY,GAAGC,OAAO,CAAC,mBAAmB,CAAC;AAEjDC,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAIC,MAAM,KAAM;EACvC,gBAAgB,EAAE;IAChB;IACAC,eAAe,EAAE,SAAS;IAC1B,0CAA0C,EAAE,CAAC,CAAC;IAE9C,sBAAsB,EAAE;MACtB,qBAAqB,EAAE,GAAG;MAC1BC,WAAW,EAAE;IACf,CAAC;IACD,4BAA4B,EAAE;MAC5B,qBAAqB,EAAE,GAAG;MAC1B,cAAc,EAAE;IAClB,CAAC;IACD;IACA,gCAAgC,EAAE,CAAC,CAAC;IACpC,4BAA4B,EAAE;MAC5B,qBAAqB,EAAE,GAAG;MAC1BA,WAAW,EAAE;IACf,CAAC;IACD,kCAAkC,EAAE;MAClC,qBAAqB,EAAE,GAAG;MAC1BA,WAAW,EAAE;IACf,CAAC;IAED,qCAAqC,EAAE;MACrC,sBAAsB,EAAE;QACtB,qBAAqB,EAAE,GAAG;QAC1BA,WAAW,EAAE;MACf,CAAC;MACD,4BAA4B,EAAE;QAC5B,qBAAqB,EAAE,GAAG;QAC1B,cAAc,EAAE;MAClB;IACF,CAAC;IAED,WAAW,EAAE;MACX,2CAA2C,EAAE,CAAC,CAAC;MAC/C,oEAAoE,CAAC,CAAC;MAEtEC,eAAe,aAAUR,YAAY,2NAErC,CAAC;MACD;IACF,CAAC;;IAED,+BAA6B;MAC3B;MACA;MACA;MACA;IAAA,CACD;IAED;IACA,kCAAkC,EAAE;MAClC,gCAAgC,EAAE,CAAC;IACrC,CAAC;IAED;IACA;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IAEI,mDAAmD,EAAE,CAAC,CAAC;IAEvD;IACA,MAAM,EAAE;MACNS,KAAK,EAAE,QAAQ;MACfC,MAAM,EAAE;IACV,CAAC;IAED,MAAM,EAAE;MACND,KAAK,EAAE,QAAQ;MACfC,MAAM,EAAE;MACR;IACF,CAAC;;IAED,MAAM,EAAE;MACND,KAAK,EAAE,QAAQ;MACfC,MAAM,EAAE;IACV,CAAC;IAED;IACA,gCAAgC,EAAE;MAChC,yEAAyE,EAAE,CAAC;MAC5E;MACA;MACA;IACF,CAAC;;IAED;IACA,sBAAsB,EAAE;MACtBC,WAAW,EAAE;IACf,CAAC;IACD,uBAAuB,EAAE;MACvBC,UAAU,EAAE;IACd,CAAC;IAED,SAAS,EAAE;MACT,sCAAsC,EAAE,CAAC,CAAC;MAC1C;MACA;MACA;MACA,8BAA8B,EAAE,CAAC,CAAC;MAElC,MAAM,EAAE;QACN,gBAAgB,EAAE,CAAC;MACrB,CAAC;MAED,MAAM,EAAE;QACN,gBAAgB,EAAE,CAAC;MACrB,CAAC;MAED,MAAM,EAAE;QACN,kBAAkB,EAAE,CAAC;MACvB;IACF;EACF;AACF,CAAC,CAAC"}
+{"version":3,"file":"checkbox.js","names":["module","exports","Checkbox","svg"],"sources":["../../../src/components/checkbox.js"],"sourcesContent":["module.exports = Checkbox = () => ({\r\n  '.sk-form-checkbox': {\r\n    '@apply bg-inherit': {},\r\n    '@apply rounded-utility': {},\r\n    '@apply bg-transparent border-transparent': {},\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      '@apply w-[2.4rem] h-[2.4rem]': {},\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply w-[2.4rem] h-[2.4rem]': {},\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply w-[2.4rem] h-[2.4rem]': {},\r\n    },\r\n\r\n    '+ .sk-icon': {\r\n      '@apply absolute inset-0 my-auto bg-transparent': {},\r\n      '@apply border-[0.1rem] p-2 border-primitives-overlay-darken-6 dark:border-primitives-overlay-lighten-6': {},\r\n      '@apply bg-primitives-overlay-lighten-10 dark:bg-primitives-overlay-darken-6': {},\r\n\r\n      svg: {\r\n        '@apply hidden': {},\r\n      },\r\n    },\r\n\r\n    '&&:checked': {\r\n      '@apply text-light-primary bg-none': {},\r\n\r\n      '& + .sk-icon': {\r\n        '@apply text-light-primary bg-dark-primary border-dark-primary': {},\r\n\r\n        svg: {\r\n          '@apply block': {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&&:hover:not(&&-disabled,&&:checked,&&[aria-invalid=true]),&&:hover:focus:not(&&-disabled,&&:checked,&&[aria-invalid=true])':\r\n      {\r\n        '& + .sk-icon, &:focus + .sk-icon': {\r\n          '@apply text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-5 border-primitives-overlay-darken-8 dark:border-primitives-overlay-lighten-4':\r\n            {},\r\n\r\n          svg: {\r\n            '@apply block': {},\r\n          },\r\n        },\r\n      },\r\n\r\n    '&&[aria-invalid=true]': {\r\n      '& + .sk-icon': {\r\n        '@apply border-2 border-error-surface-primary': {},\r\n      },\r\n\r\n      '&&:checked': {\r\n        '& + .sk-icon': {\r\n          '@apply p-2 bg-background-content text-dark-primary': {},\r\n\r\n          svg: {\r\n            '@apply block': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n\r\n    // disabled\r\n    '&&-disabled,&&-disabled:hover': {\r\n      '@apply cursor-not-allowed': {},\r\n\r\n      '& + .sk-icon': {\r\n        '@apply bg-background-200 border-primitives-overlay-darken-3': {},\r\n      },\r\n\r\n      '&:checked': {\r\n        '& + .sk-icon': {\r\n          '@apply bg-dark-disabled text-light-primary border-0': {},\r\n        },\r\n      },\r\n\r\n      '& ~ .sk-form-checkbox-label': {\r\n        '@apply text-dark-disabled': {},\r\n      },\r\n    },\r\n\r\n    // label\r\n    '&-label-left &-label': {\r\n      '@apply mr-[.8rem]': {},\r\n    },\r\n    '&-label-right &-label': {\r\n      '@apply ml-[.8rem]': {},\r\n    },\r\n\r\n    '&-label-left': {\r\n      '.sk-icon': {\r\n        '@apply left-auto right-0': {},\r\n      },\r\n    },\r\n\r\n    '&-label-right': {\r\n      '.sk-icon': {\r\n        '@apply right-auto left-0': {},\r\n      },\r\n    },\r\n\r\n    '&-label': {\r\n      '@apply font-normal text-body select-none text-small': {},\r\n\r\n      '&-wrapper': {\r\n        '@apply relative inline-flex align-top items-center cursor-base': {},\r\n      },\r\n\r\n      '&-sm': {\r\n        '@apply text-small': {},\r\n      },\r\n\r\n      '&-md': {\r\n        '@apply text-base': {},\r\n      },\r\n\r\n      '&-lg': {\r\n        '@apply text-large': {},\r\n      },\r\n    },\r\n\r\n    '&-group': {\r\n      '@apply flex flex-col gap-16 my-12': {},\r\n      '&[data-direction=\"row\"]': {\r\n        '@apply flex-row': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAGA,CAAA,MAAO;EACjC,mBAAmB,EAAE;IACnB,mBAAmB,EAAE,CAAC,CAAC;IACvB,wBAAwB,EAAE,CAAC,CAAC;IAC5B,0CAA0C,EAAE,CAAC,CAAC;IAE9C;IACA,MAAM,EAAE;MACN,8BAA8B,EAAE,CAAC;IACnC,CAAC;IAED,MAAM,EAAE;MACN,8BAA8B,EAAE,CAAC;IACnC,CAAC;IAED,MAAM,EAAE;MACN,8BAA8B,EAAE,CAAC;IACnC,CAAC;IAED,YAAY,EAAE;MACZ,gDAAgD,EAAE,CAAC,CAAC;MACpD,wGAAwG,EAAE,CAAC,CAAC;MAC5G,6EAA6E,EAAE,CAAC,CAAC;MAEjFC,GAAG,EAAE;QACH,eAAe,EAAE,CAAC;MACpB;IACF,CAAC;IAED,YAAY,EAAE;MACZ,mCAAmC,EAAE,CAAC,CAAC;MAEvC,cAAc,EAAE;QACd,+DAA+D,EAAE,CAAC,CAAC;QAEnEA,GAAG,EAAE;UACH,cAAc,EAAE,CAAC;QACnB;MACF;IACF,CAAC;IAED,6HAA6H,EAC3H;MACE,kCAAkC,EAAE;QAClC,4JAA4J,EAC1J,CAAC,CAAC;QAEJA,GAAG,EAAE;UACH,cAAc,EAAE,CAAC;QACnB;MACF;IACF,CAAC;IAEH,uBAAuB,EAAE;MACvB,cAAc,EAAE;QACd,8CAA8C,EAAE,CAAC;MACnD,CAAC;MAED,YAAY,EAAE;QACZ,cAAc,EAAE;UACd,oDAAoD,EAAE,CAAC,CAAC;UAExDA,GAAG,EAAE;YACH,cAAc,EAAE,CAAC;UACnB;QACF;MACF;IACF,CAAC;IAED;IACA,+BAA+B,EAAE;MAC/B,2BAA2B,EAAE,CAAC,CAAC;MAE/B,cAAc,EAAE;QACd,6DAA6D,EAAE,CAAC;MAClE,CAAC;MAED,WAAW,EAAE;QACX,cAAc,EAAE;UACd,qDAAqD,EAAE,CAAC;QAC1D;MACF,CAAC;MAED,6BAA6B,EAAE;QAC7B,2BAA2B,EAAE,CAAC;MAChC;IACF,CAAC;IAED;IACA,sBAAsB,EAAE;MACtB,mBAAmB,EAAE,CAAC;IACxB,CAAC;IACD,uBAAuB,EAAE;MACvB,mBAAmB,EAAE,CAAC;IACxB,CAAC;IAED,cAAc,EAAE;MACd,UAAU,EAAE;QACV,0BAA0B,EAAE,CAAC;MAC/B;IACF,CAAC;IAED,eAAe,EAAE;MACf,UAAU,EAAE;QACV,0BAA0B,EAAE,CAAC;MAC/B;IACF,CAAC;IAED,SAAS,EAAE;MACT,qDAAqD,EAAE,CAAC,CAAC;MAEzD,WAAW,EAAE;QACX,gEAAgE,EAAE,CAAC;MACrE,CAAC;MAED,MAAM,EAAE;QACN,mBAAmB,EAAE,CAAC;MACxB,CAAC;MAED,MAAM,EAAE;QACN,kBAAkB,EAAE,CAAC;MACvB,CAAC;MAED,MAAM,EAAE;QACN,mBAAmB,EAAE,CAAC;MACxB;IACF,CAAC;IAED,SAAS,EAAE;MACT,mCAAmC,EAAE,CAAC,CAAC;MACvC,yBAAyB,EAAE;QACzB,iBAAiB,EAAE,CAAC;MACtB;IACF;EACF;AACF,CAAC,CAAC"}

package/dist/esm/components/combobox.js

@@ -0,0 +1,65 @@
+module.exports = ComboBox = () => ({
+  '.sk-form-combobox': {
+    '@apply focus-within:ring ring-ring ring-offset': {},
+    '@apply relative w-auto': {},
+    '@apply inline-block': {},
+    '&-sm': {
+      '@apply h-[3.2rem]': {},
+      '@apply rounded-button-sm': {},
+      '.sk-form-combobox-select.active': {
+        '@apply text-input-small': {},
+        '@apply pr-[5.2rem]': {}
+      }
+    },
+    '&-md': {
+      '@apply h-[4rem]': {},
+      '@apply rounded-button-md': {},
+      '.sk-form-combobox-select.active': {
+        '@apply text-input-medium': {},
+        '@apply pr-[6.1rem]': {}
+      }
+    },
+    '&-lg': {
+      '@apply h-[4.8rem]': {},
+      '@apply rounded-button-lg': {},
+      '.sk-form-combobox-select.active': {
+        '@apply text-input-large': {},
+        '@apply pr-[6.8rem]': {}
+      }
+    },
+    '&-select': {
+      '@apply h-full bg-right-12 bg-no-repeat': {},
+      '&.sk-form-select': {
+        '@apply focus:outline-none focus:ring-0 focus:ring-transparent': {}
+      },
+      '@apply w-full': {},
+      '&:not(.active)': {
+        '@apply cursor-default': {}
+      },
+      '@apply focus:border-transparent': {},
+      '@apply focus:hover:border-transparent': {},
+      '&.active': {
+        '@apply bg-primitives-overlay-lighten-10': {},
+        '@apply dark:bg-primitives-overlay-darken-6': {},
+        '@apply placeholder:text-dark-placeholder': {},
+        '@apply text-dark-primary': {},
+        '@apply border-transparent': {}
+      }
+    },
+    '&-list': {
+      '@apply w-full': {},
+      '@apply max-h-[23rem] overflow-y-auto': {},
+      '&-option': {
+        '&.sk-popup-menu-item': {
+          '@apply cursor-default': {},
+          '@apply leading-none': {},
+          '@apply h-auto': {}
+        },
+        '&-checkbox': {
+          '@apply w-0 h-0 m-0 p-0 opacity-0': {}
+        }
+      }
+    }
+  }
+});
+//# sourceMappingURL=combobox.js.map

package/dist/esm/components/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":["module","exports","ComboBox"],"sources":["../../../src/components/combobox.js"],"sourcesContent":["module.exports = ComboBox = () => ({\r\n  '.sk-form-combobox': {\r\n    '@apply focus-within:ring ring-ring ring-offset': {},\r\n    '@apply relative w-auto': {},\r\n    '@apply inline-block': {},\r\n    '&-sm': {\r\n      '@apply h-[3.2rem]': {},\r\n      '@apply rounded-button-sm': {},\r\n      '.sk-form-combobox-select.active': {\r\n        '@apply text-input-small': {},\r\n        '@apply pr-[5.2rem]': {},\r\n      },\r\n    },\r\n    '&-md': {\r\n      '@apply h-[4rem]': {},\r\n      '@apply rounded-button-md': {},\r\n      '.sk-form-combobox-select.active': {\r\n        '@apply text-input-medium': {},\r\n        '@apply pr-[6.1rem]': {},\r\n      },\r\n    },\r\n    '&-lg': {\r\n      '@apply h-[4.8rem]': {},\r\n      '@apply rounded-button-lg': {},\r\n      '.sk-form-combobox-select.active': {\r\n        '@apply text-input-large': {},\r\n        '@apply pr-[6.8rem]': {},\r\n      },\r\n    },\r\n\r\n    '&-select': {\r\n      '@apply h-full bg-right-12 bg-no-repeat': {},\r\n\r\n      '&.sk-form-select': { '@apply focus:outline-none focus:ring-0 focus:ring-transparent': {} },\r\n      '@apply w-full': {},\r\n\r\n      '&:not(.active)': {\r\n        '@apply cursor-default': {},\r\n      },\r\n      '@apply focus:border-transparent': {},\r\n      '@apply focus:hover:border-transparent': {},\r\n      '&.active': {\r\n        '@apply bg-primitives-overlay-lighten-10': {},\r\n        '@apply dark:bg-primitives-overlay-darken-6': {},\r\n        '@apply placeholder:text-dark-placeholder': {},\r\n        '@apply text-dark-primary': {},\r\n        '@apply border-transparent': {},\r\n      },\r\n    },\r\n    '&-list': {\r\n      '@apply w-full': {},\r\n      '@apply max-h-[23rem] overflow-y-auto': {},\r\n      '&-option': {\r\n        '&.sk-popup-menu-item': {\r\n          '@apply cursor-default': {},\r\n          '@apply leading-none': {},\r\n          '@apply h-auto': {},\r\n        },\r\n\r\n        '&-checkbox': {\r\n          '@apply w-0 h-0 m-0 p-0 opacity-0': {},\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAGA,CAAA,MAAO;EACjC,mBAAmB,EAAE;IACnB,gDAAgD,EAAE,CAAC,CAAC;IACpD,wBAAwB,EAAE,CAAC,CAAC;IAC5B,qBAAqB,EAAE,CAAC,CAAC;IACzB,MAAM,EAAE;MACN,mBAAmB,EAAE,CAAC,CAAC;MACvB,0BAA0B,EAAE,CAAC,CAAC;MAC9B,iCAAiC,EAAE;QACjC,yBAAyB,EAAE,CAAC,CAAC;QAC7B,oBAAoB,EAAE,CAAC;MACzB;IACF,CAAC;IACD,MAAM,EAAE;MACN,iBAAiB,EAAE,CAAC,CAAC;MACrB,0BAA0B,EAAE,CAAC,CAAC;MAC9B,iCAAiC,EAAE;QACjC,0BAA0B,EAAE,CAAC,CAAC;QAC9B,oBAAoB,EAAE,CAAC;MACzB;IACF,CAAC;IACD,MAAM,EAAE;MACN,mBAAmB,EAAE,CAAC,CAAC;MACvB,0BAA0B,EAAE,CAAC,CAAC;MAC9B,iCAAiC,EAAE;QACjC,yBAAyB,EAAE,CAAC,CAAC;QAC7B,oBAAoB,EAAE,CAAC;MACzB;IACF,CAAC;IAED,UAAU,EAAE;MACV,wCAAwC,EAAE,CAAC,CAAC;MAE5C,kBAAkB,EAAE;QAAE,+DAA+D,EAAE,CAAC;MAAE,CAAC;MAC3F,eAAe,EAAE,CAAC,CAAC;MAEnB,gBAAgB,EAAE;QAChB,uBAAuB,EAAE,CAAC;MAC5B,CAAC;MACD,iCAAiC,EAAE,CAAC,CAAC;MACrC,uCAAuC,EAAE,CAAC,CAAC;MAC3C,UAAU,EAAE;QACV,yCAAyC,EAAE,CAAC,CAAC;QAC7C,4CAA4C,EAAE,CAAC,CAAC;QAChD,0CAA0C,EAAE,CAAC,CAAC;QAC9C,0BAA0B,EAAE,CAAC,CAAC;QAC9B,2BAA2B,EAAE,CAAC;MAChC;IACF,CAAC;IACD,QAAQ,EAAE;MACR,eAAe,EAAE,CAAC,CAAC;MACnB,sCAAsC,EAAE,CAAC,CAAC;MAC1C,UAAU,EAAE;QACV,sBAAsB,EAAE;UACtB,uBAAuB,EAAE,CAAC,CAAC;UAC3B,qBAAqB,EAAE,CAAC,CAAC;UACzB,eAAe,EAAE,CAAC;QACpB,CAAC;QAED,YAAY,EAAE;UACZ,kCAAkC,EAAE,CAAC;QACvC;MACF;IACF;EACF;AACF,CAAC,CAAC"}