@sk-web-gui/core 3.13.1 → 3.15.0

package/dist/esm/plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plugin.ts"],"sourcesContent":["import TailwindPlugin from 'tailwindcss/plugin';\r\nimport { base } from './base';\r\nimport { theme } from './theme';\r\nimport { Component, components } from './components';\r\nimport { PluginAPI } from 'tailwindcss/types/config';\r\n\r\nexport interface PluginOptions {\r\n  colors?: string[];\r\n  cssBase?: boolean;\r\n  components?: string[];\r\n}\r\n\r\nexport const pluginDefaults = { cssBase: true, colors: [] };\r\n\r\nconst defaultColors = ['warning', 'error', 'success', 'info', 'vattjom', 'juniskar', 'bjornstigen', 'gronsta'];\r\n\r\nconst getComponentWithDependencies = (compName: string): Component[] => {\r\n  const compWithDeps = components.find((comp) => comp.comp.name === compName);\r\n  if (!compWithDeps) return [];\r\n\r\n  let comps: Component[] = [compWithDeps.comp];\r\n  if (compWithDeps?.deps) {\r\n    for (let index = 0; index < compWithDeps?.deps.length; index++) {\r\n      comps = [...getComponentWithDependencies(compWithDeps.deps[index].name), ...comps];\r\n    }\r\n  }\r\n\r\n  return comps;\r\n};\r\n\r\nconst plugin = TailwindPlugin.withOptions<PluginOptions>(\r\n  function (_options) {\r\n    const options = { ...pluginDefaults, ..._options };\r\n\r\n    const pickedComponents = components\r\n      .reduce((comps: Component[], compWithDeps) => {\r\n        if (options?.components && !options.components.includes(compWithDeps.comp.name)) {\r\n          return comps;\r\n        }\r\n\r\n        let deps: Component[] = [];\r\n        if (compWithDeps?.deps) {\r\n          for (let index = 0; index < compWithDeps.deps.length; index++) {\r\n            deps = [...getComponentWithDependencies(compWithDeps.deps[index].name), ...deps];\r\n          }\r\n        }\r\n\r\n        return [...comps, ...deps, compWithDeps.comp];\r\n      }, [])\r\n      .filter((val, index, arr) => arr.indexOf(val) === index);\r\n\r\n    return function ({ addComponents, addBase, theme }: PluginAPI) {\r\n      const optionColors = [...defaultColors, ...(options.colors || [])];\r\n\r\n      if (options.cssBase) {\r\n        addBase(base);\r\n      }\r\n\r\n      addComponents(pickedComponents.map((component) => component(optionColors, theme)));\r\n    };\r\n  },\r\n  function () {\r\n    return {\r\n      theme: theme,\r\n    };\r\n  }\r\n);\r\n\r\nexport default plugin;\r\n"],"names":["TailwindPlugin","base","theme","components","pluginDefaults","cssBase","colors","defaultColors","getComponentWithDependencies","compName","compWithDeps","find","comp","name","comps","deps","index","length","plugin","withOptions","_options","options","pickedComponents","reduce","includes","filter","val","arr","indexOf","addComponents","addBase","optionColors","map","component"],"mappings":"AAAA,OAAOA,oBAAoB,qBAAqB;AAChD,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,KAAK,QAAQ,UAAU;AAChC,SAAoBC,UAAU,QAAQ,eAAe;AASrD,OAAO,MAAMC,iBAAiB;IAAEC,SAAS;IAAMC,QAAQ,EAAE;AAAC,EAAE;AAE5D,MAAMC,gBAAgB;IAAC;IAAW;IAAS;IAAW;IAAQ;IAAW;IAAY;IAAe;CAAU;AAE9G,MAAMC,+BAA+B,CAACC;IACpC,MAAMC,eAAeP,WAAWQ,IAAI,CAAC,CAACC,OAASA,KAAKA,IAAI,CAACC,IAAI,KAAKJ;IAClE,IAAI,CAACC,cAAc,OAAO,EAAE;IAE5B,IAAII,QAAqB;QAACJ,aAAaE,IAAI;KAAC;IAC5C,IAAIF,cAAcK,MAAM;QACtB,IAAK,IAAIC,QAAQ,GAAGA,QAAQN,cAAcK,KAAKE,QAAQD,QAAS;YAC9DF,QAAQ;mBAAIN,6BAA6BE,aAAaK,IAAI,CAACC,MAAM,CAACH,IAAI;mBAAMC;aAAM;QACpF;IACF;IAEA,OAAOA;AACT;AAEA,MAAMI,SAASlB,eAAemB,WAAW,CACvC,SAAUC,QAAQ;IAChB,MAAMC,UAAU;QAAE,GAAGjB,cAAc;QAAE,GAAGgB,QAAQ;IAAC;IAEjD,MAAME,mBAAmBnB,WACtBoB,MAAM,CAAC,CAACT,OAAoBJ;QAC3B,IAAIW,SAASlB,cAAc,CAACkB,QAAQlB,UAAU,CAACqB,QAAQ,CAACd,aAAaE,IAAI,CAACC,IAAI,GAAG;YAC/E,OAAOC;QACT;QAEA,IAAIC,OAAoB,EAAE;QAC1B,IAAIL,cAAcK,MAAM;YACtB,IAAK,IAAIC,QAAQ,GAAGA,QAAQN,aAAaK,IAAI,CAACE,MAAM,EAAED,QAAS;gBAC7DD,OAAO;uBAAIP,6BAA6BE,aAAaK,IAAI,CAACC,MAAM,CAACH,IAAI;uBAAME;iBAAK;YAClF;QACF;QAEA,OAAO;eAAID;eAAUC;YAAML,aAAaE,IAAI;SAAC;IAC/C,GAAG,EAAE,EACJa,MAAM,CAAC,CAACC,KAAKV,OAAOW,MAAQA,IAAIC,OAAO,CAACF,SAASV;IAEpD,OAAO,SAAU,KAA4C;YAA5C,EAAEa,aAAa,EAAEC,OAAO,EAAE5B,KAAK,EAAa,GAA5C;QACf,MAAM6B,eAAe;eAAIxB;eAAmBc,QAAQf,MAAM,IAAI,EAAE;SAAE;QAElE,IAAIe,QAAQhB,OAAO,EAAE;YACnByB,QAAQ7B;QACV;QAEA4B,cAAcP,iBAAiBU,GAAG,CAAC,CAACC,YAAcA,UAAUF,cAAc7B;IAC5E;AACF,GACA;IACE,OAAO;QACLA,OAAOA;IACT;AACF;AAGF,eAAegB,OAAO"}
+{"version":3,"sources":["../../src/plugin.ts"],"sourcesContent":["import TailwindPlugin from 'tailwindcss/plugin';\r\nimport { base } from './base';\r\nimport { theme } from './theme';\r\nimport { Component, components } from './components';\r\nimport { PluginAPI } from 'tailwindcss/types/config';\r\n\r\nexport interface PluginOptions {\r\n  colors?: string[];\r\n  cssBase?: boolean;\r\n  components?: string[];\r\n}\r\n\r\nexport const pluginDefaults = { cssBase: true, colors: [] };\r\n\r\nconst defaultColors = ['warning', 'error', 'success', 'info', 'vattjom', 'juniskar', 'bjornstigen', 'gronsta'];\r\n\r\nconst getComponentWithDependencies = (compName: string): Component[] => {\r\n  const compWithDeps = components.find((comp) => comp.comp.name === compName);\r\n  if (!compWithDeps) return [];\r\n\r\n  let comps: Component[] = [compWithDeps.comp];\r\n  if (compWithDeps?.deps) {\r\n    for (let index = 0; index < compWithDeps?.deps.length; index++) {\r\n      comps = [...getComponentWithDependencies(compWithDeps.deps[index].name), ...comps];\r\n    }\r\n  }\r\n\r\n  return comps;\r\n};\r\n\r\nconst plugin = TailwindPlugin.withOptions<PluginOptions>(\r\n  function (_options) {\r\n    const options = { ...pluginDefaults, ..._options };\r\n\r\n    const pickedComponents = components\r\n      .reduce((comps: Component[], compWithDeps) => {\r\n        if (options?.components && !options.components.includes(compWithDeps.comp.name)) {\r\n          return comps;\r\n        }\r\n\r\n        let deps: Component[] = [];\r\n        if (compWithDeps?.deps) {\r\n          for (let index = 0; index < compWithDeps.deps.length; index++) {\r\n            deps = [...getComponentWithDependencies(compWithDeps.deps[index].name), ...deps];\r\n          }\r\n        }\r\n\r\n        return [...comps, ...deps, compWithDeps.comp];\r\n      }, [])\r\n      .filter((val, index, arr) => arr.indexOf(val) === index);\r\n\r\n    return function ({ addComponents, addBase, theme }: PluginAPI) {\r\n      const optionColors = [...defaultColors, ...(options.colors || [])];\r\n\r\n      if (options.cssBase) {\r\n        addBase(base);\r\n      }\r\n\r\n      addComponents(pickedComponents.map((component) => component(optionColors, theme)));\r\n    };\r\n  },\r\n  function () {\r\n    return {\r\n      theme: theme,\r\n    };\r\n  }\r\n);\r\n\r\nexport default plugin;\r\n"],"names":["TailwindPlugin","base","theme","components","pluginDefaults","cssBase","colors","defaultColors","getComponentWithDependencies","compName","compWithDeps","find","comp","name","comps","deps","index","length","plugin","withOptions","_options","options","pickedComponents","reduce","includes","filter","val","arr","indexOf","addComponents","addBase","optionColors","map","component"],"mappings":"AAAA,OAAOA,oBAAoB,qBAAqB;AAChD,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,KAAK,QAAQ,UAAU;AAChC,SAAoBC,UAAU,QAAQ,eAAe;AASrD,OAAO,MAAMC,iBAAiB;IAAEC,SAAS;IAAMC,QAAQ,EAAE;AAAC,EAAE;AAE5D,MAAMC,gBAAgB;IAAC;IAAW;IAAS;IAAW;IAAQ;IAAW;IAAY;IAAe;CAAU;AAE9G,MAAMC,+BAA+B,CAACC;IACpC,MAAMC,eAAeP,WAAWQ,IAAI,CAAC,CAACC,OAASA,KAAKA,IAAI,CAACC,IAAI,KAAKJ;IAClE,IAAI,CAACC,cAAc,OAAO,EAAE;IAE5B,IAAII,QAAqB;QAACJ,aAAaE,IAAI;KAAC;IAC5C,IAAIF,cAAcK,MAAM;QACtB,IAAK,IAAIC,QAAQ,GAAGA,QAAQN,cAAcK,KAAKE,QAAQD,QAAS;YAC9DF,QAAQ;mBAAIN,6BAA6BE,aAAaK,IAAI,CAACC,MAAM,CAACH,IAAI;mBAAMC;aAAM;QACpF;IACF;IAEA,OAAOA;AACT;AAEA,MAAMI,SAASlB,eAAemB,WAAW,CACvC,SAAUC,QAAQ;IAChB,MAAMC,UAAU;QAAE,GAAGjB,cAAc;QAAE,GAAGgB,QAAQ;IAAC;IAEjD,MAAME,mBAAmBnB,WACtBoB,MAAM,CAAC,CAACT,OAAoBJ;QAC3B,IAAIW,SAASlB,cAAc,CAACkB,QAAQlB,UAAU,CAACqB,QAAQ,CAACd,aAAaE,IAAI,CAACC,IAAI,GAAG;YAC/E,OAAOC;QACT;QAEA,IAAIC,OAAoB,EAAE;QAC1B,IAAIL,cAAcK,MAAM;YACtB,IAAK,IAAIC,QAAQ,GAAGA,QAAQN,aAAaK,IAAI,CAACE,MAAM,EAAED,QAAS;gBAC7DD,OAAO;uBAAIP,6BAA6BE,aAAaK,IAAI,CAACC,MAAM,CAACH,IAAI;uBAAME;iBAAK;YAClF;QACF;QAEA,OAAO;eAAID;eAAUC;YAAML,aAAaE,IAAI;SAAC;IAC/C,GAAG,EAAE,EACJa,MAAM,CAAC,CAACC,KAAKV,OAAOW,MAAQA,IAAIC,OAAO,CAACF,SAASV;IAEpD,OAAO,SAAU,EAAEa,aAAa,EAAEC,OAAO,EAAE5B,KAAK,EAAa;QAC3D,MAAM6B,eAAe;eAAIxB;eAAmBc,QAAQf,MAAM,IAAI,EAAE;SAAE;QAElE,IAAIe,QAAQhB,OAAO,EAAE;YACnByB,QAAQ7B;QACV;QAEA4B,cAAcP,iBAAiBU,GAAG,CAAC,CAACC,YAAcA,UAAUF,cAAc7B;IAC5E;AACF,GACA;IACE,OAAO;QACLA,OAAOA;IACT;AACF;AAGF,eAAegB,OAAO"}

package/dist/esm/with-opacity.js

@@ -1,6 +1,5 @@
 const withOpacity = function withOpacity(variableName) {
-    return (param)=>{
-        let { opacityValue } = param;
+    return ({ opacityValue })=>{
         if (opacityValue) return `rgba(var(${variableName}), ${opacityValue})`;
         return `rgb(var(${variableName}))`;
     };

package/dist/esm/with-opacity.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/with-opacity.ts"],"sourcesContent":["const withOpacity = function withOpacity(variableName: string) {\r\n  return ({ opacityValue }: { opacityValue: string }) => {\r\n    if (opacityValue) return `rgba(var(${variableName}), ${opacityValue})`;\r\n    return `rgb(var(${variableName}))`;\r\n  };\r\n};\r\nexport default withOpacity;\r\n"],"names":["withOpacity","variableName","opacityValue"],"mappings":"AAAA,MAAMA,cAAc,SAASA,YAAYC,YAAoB;IAC3D,OAAO;YAAC,EAAEC,YAAY,EAA4B;QAChD,IAAIA,cAAc,OAAO,CAAC,SAAS,EAAED,aAAa,GAAG,EAAEC,aAAa,CAAC,CAAC;QACtE,OAAO,CAAC,QAAQ,EAAED,aAAa,EAAE,CAAC;IACpC;AACF;AACA,eAAeD,YAAY"}
+{"version":3,"sources":["../../src/with-opacity.ts"],"sourcesContent":["const withOpacity = function withOpacity(variableName: string) {\r\n  return ({ opacityValue }: { opacityValue: string }) => {\r\n    if (opacityValue) return `rgba(var(${variableName}), ${opacityValue})`;\r\n    return `rgb(var(${variableName}))`;\r\n  };\r\n};\r\nexport default withOpacity;\r\n"],"names":["withOpacity","variableName","opacityValue"],"mappings":"AAAA,MAAMA,cAAc,SAASA,YAAYC,YAAoB;IAC3D,OAAO,CAAC,EAAEC,YAAY,EAA4B;QAChD,IAAIA,cAAc,OAAO,CAAC,SAAS,EAAED,aAAa,GAAG,EAAEC,aAAa,CAAC,CAAC;QACtE,OAAO,CAAC,QAAQ,EAAED,aAAa,EAAE,CAAC;IACpC;AACF;AACA,eAAeD,YAAY"}

package/dist/types/components/accordion.d.ts

@@ -59,7 +59,7 @@ export declare const Accordion: () => {
             '.sk-disclosure-toggle': {
                 '@apply gap-12': {};
                 '.sk-icon': {
-                    '@apply w-20 h-20': {};
+                    '@apply w-20 min-h-20': {};
                 };
             };
             '.sk-disclosure-support': {
@@ -68,7 +68,7 @@ export declare const Accordion: () => {
             '&[data-variant="default"]': {
                 '.sk-disclosure-toggle': {
                     '@apply py-4': {};
-                    '@apply h-40': {};
+                    '@apply min-h-40': {};
                 };
                 '.sk-disclosure-header-icon': {
                     '@apply w-32 h-32': {};
@@ -86,7 +86,7 @@ export declare const Accordion: () => {
             '.sk-disclosure-toggle': {
                 '@apply gap-12': {};
                 '.sk-icon': {
-                    '@apply w-24 h-24': {};
+                    '@apply w-24 min-h-24': {};
                 };
             };
             '.sk-disclosure-support': {
@@ -95,7 +95,7 @@ export declare const Accordion: () => {
             '&[data-variant="default"]': {
                 '.sk-disclosure-toggle': {
                     '@apply py-8': {};
-                    '@apply h-56': {};
+                    '@apply min-h-56': {};
                 };
                 '.sk-disclosure-header-icon': {
                     '@apply w-40 h-40': {};
@@ -116,21 +116,28 @@ export declare const Accordion: () => {
             };
         };
         '&-body': {
+            '&[data-size="sm"]': {
+                '@apply pr-12': {};
+            };
+            '&[data-size="md"]': {
+                '@apply pr-12': {};
+            };
+            '&[data-size="lg"]': {
+                '@apply pr-16': {};
+            };
             '@apply text-base': {};
             '@apply flex flex-col': {};
             '@apply mb-32': {};
             '@apply mr-32': {};
             '@apply gap-8': {};
             '@apply py-0': {};
-            '@apply h-0 overflow-hidden': {};
             transitionProperty: string;
-            transitionTimingFunction: string;
             transitionDuration: string;
             '&[aria-hidden="true"], &[data-hidden="true"]': {
-                '@apply my-0 invisible h-0': {};
+                '@apply my-0 invisible max-h-0 opacity-0': {};
             };
             '&[aria-hidden="false"], &[data-hidden="false"]': {
-                '@apply block h-max visible': {};
+                '@apply block max-h-screen opacity-100 visible': {};
             };
             '&[data-variant="alt"]': {
                 '@apply mt-24': {};
@@ -156,11 +163,6 @@ export declare const Accordion: () => {
                 };
             };
         };
-        '&-is-open': {
-            '.sk-disclosure-body': {
-                '@apply overflow-visible animate-reset-overflow': {};
-            };
-        };
     };
     '.sk-accordion': {
         '&-item': {

package/dist/types/components/badge.d.ts

@@ -12,8 +12,16 @@ export declare const Badge: (colors: string[]) => {
         '@apply text-light-primary': {};
         '@apply rounded-utility': {};
         '@apply overflow-hidden': {};
-        '@apply h-24 w-24': {};
-        '@apply text-label-small': {};
+        '&[data-size="sm"]': {
+            '@apply h-22 min-w-22': {};
+            '@apply p-4': {};
+            '@apply text-label-extra-small': {};
+        };
+        '&[data-size="md"]': {
+            '@apply h-24 min-w-24': {};
+            '@apply p-4': {};
+            '@apply text-label-small': {};
+        };
         '&[data-rounded="true"]': {
             '@apply rounded-circular': {};
         };

package/dist/types/components/card.d.ts

@@ -98,6 +98,15 @@ export declare const Card: (colors: string[]) => {
         '@apply no-underline hover:no-underline': {};
         '@apply flex bg-vattjom-surface-accent': {};
         '@apply p-14 rounded-groups': {};
+        '&.sk-meta-card-use-hover-effect:hover': {
+            '@apply cursor-pointer': {};
+        };
+        '&.sk-meta-card-use-hover-effect[data-color="vattjom"]:hover': {
+            '@apply bg-vattjom-background-300': {};
+        };
+        '&.sk-meta-card-use-hover-effect[data-color="mono"]:hover': {
+            '@apply bg-primitives-overlay-darken-2 dark:bg-primitives-overlay-lighten-2': {};
+        };
         '&[data-color="mono"]': {
             '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {};
         };
@@ -116,20 +125,45 @@ export declare const Card: (colors: string[]) => {
         '&-body': {
             '&-header': {
                 'h1, h2, h3, h4, h5, h6, h7, a, p': {
-                    '@apply mt-6 text-base line-clamp-1': {};
+                    '@apply mt-6 line-clamp-1': {};
                     '@apply text-dark-primary': {};
                 };
             };
             '&-content': {
                 'p, a': {
-                    '@apply text-primitives-gray-700 dark:text-primitives-gray-200 text-small': {};
+                    '@apply text-primitives-gray-700 dark:text-primitives-gray-200': {};
                     '@apply text-dark-secondary line-clamp-1': {};
                 };
             };
         };
         '&-external-link-icon': {
-            '@apply ml-auto h-32 w-32': {};
-            '@apply p-6 text-dark': {};
+            '@apply ml-auto h-32 w-32 p-6 text-dark shrink-0': {};
         };
     };
+    '.sk-meta-card[data-size="sm"]': {
+        '@apply h-[8.6rem]': {};
+    };
+    '.sk-meta-card[data-size="md"]': {
+        '@apply h-[9.4rem]': {};
+    };
+    '.sk-meta-card[data-size="sm"] .sk-meta-card-body-header': {
+        'h1, h2, h3, h4, h5, h6, h7, a, p': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: string;
+        };
+    };
+    '.sk-meta-card[data-size="sm"] .sk-meta-card-body-content': {
+        '@apply text-[1.4rem]': {};
+    };
+    '.sk-meta-card[data-size="md"] .sk-meta-card-body-header': {
+        'h1, h2, h3, h4, h5, h6, h7, a, p': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: string;
+        };
+    };
+    '.sk-meta-card[data-size="md"] .sk-meta-card-body-content': {
+        '@apply text-[1.6rem]': {};
+    };
 };

package/dist/types/components/input.d.ts

@@ -1,5 +1,101 @@
 export declare const Input: () => {
     '.sk-form-input': {
+        '&-addon': {
+            '.sk-form-input': {
+                '@apply rounded-0': {};
+                '@apply border-0': {};
+                '@apply focus:ring-0': {};
+                '@apply focus:ring-offset-0': {};
+                '@apply bg-transparent': {};
+                '@apply dark:bg-transparent': {};
+                '@apply grow': {};
+            };
+            '.sk-form-select': {
+                '@apply rounded-0': {};
+                '@apply border-0 hover:border-0': {};
+                '@apply focus:ring-0 focus:z-10': {};
+                '@apply focus:ring-offset-0': {};
+                '@apply bg-transparent hover:bg-transparent': {};
+                '@apply dark:bg-transparent hover:dark:bg-transparent': {};
+                '@apply grow': {};
+            };
+            '&&-left .sk-form-select': {
+                '@apply border-r-1 border-r-divider': {};
+                '@apply focus:border-r-transparent': {};
+            };
+            '&&-right .sk-form-select': {
+                '@apply border-l-1 border-l-divider': {};
+                '@apply focus:border-l-transparent': {};
+            };
+            '.sk-form-combobox': {
+                '@apply rounded-0': {};
+                '@apply border-0': {};
+                '@apply focus-within:ring-0': {};
+                '@apply focus-within:ring-offset-0': {};
+                '@apply bg-transparent': {};
+                '@apply dark:bg-transparent': {};
+            };
+            '&&-left .sk-form-combobox': {
+                '@apply border-r-1 border-r-divider': {};
+                '@apply focus:border-r-transparent': {};
+            };
+            '&&-right .sk-form-combobox': {
+                '@apply border-l-1 border-l-divider': {};
+                '@apply focus:border-l-transparent': {};
+            };
+            '@apply border-1': {};
+            '@apply border-input-field-outline': {};
+            '@apply hover:border-input-field-outline-hover': {};
+            '@apply placeholder:text-dark-placeholder': {};
+            '@apply bg-input-field-surface': {};
+            '&:invalid, &[aria-invalid="true"]': {
+                '@apply border-2 border-error-surface-primary': {};
+            };
+            '&:disabled, &[aria-disabled="true"]': {
+                '@apply bg-input-field-surface-disabled': {};
+                '@apply border-input-field-outline-disabled': {};
+                '@apply hover:border-input-field-outline-disabled': {};
+                '@apply text-dark-disabled': {};
+            };
+            '&:read-only': {
+                '@apply bg-input-field-surface': {};
+                '@apply border-input-field-outline-disabled': {};
+                '@apply text-dark-secondary': {};
+                '@apply placeholder:text-dark-secondary': {};
+            };
+            '@apply flex relative': {};
+            '@apply items-center': {};
+            '@apply focus-within:ring': {};
+            '@apply focus-within:ring-ring': {};
+            '@apply text-dark-secondary': {};
+            '@apply focus-within:border-input-field-surface': {};
+            '&:not(:invalid):not([aria-invalid="true"])': {
+                '@apply focus-within:border-input-field-surface': {};
+            };
+            '&&-lg': {
+                '@apply text-input-large': {};
+                '@apply rounded-button-lg': {};
+                '@apply h-48': {};
+            };
+            '&&-md': {
+                '@apply text-input-medium': {};
+                '@apply rounded-button-md': {};
+                '@apply h-40': {};
+            };
+            '&&-sm': {
+                '@apply text-input-small': {};
+                '@apply rounded-button-sm': {};
+                '@apply h-32': {};
+            };
+            '&&-left': {
+                '@apply rounded-r-0': {};
+                '@apply border-r-0': {};
+            };
+            '&&-right': {
+                '@apply rounded-l-0': {};
+                '@apply border-l-0': {};
+            };
+        };
         '&-addin': {
             '@apply bg-transparent': {};
             '@apply flex': {};
@@ -77,6 +173,9 @@ export declare const Input: () => {
                 '@apply text-dark-secondary': {};
                 '@apply placeholder:text-dark-secondary': {};
             };
+            '&-wrapper': {
+                '@apply flex gap-0': {};
+            };
             '@apply flex relative': {};
             '@apply items-center': {};
             '@apply focus-within:ring': {};
@@ -89,14 +188,27 @@ export declare const Input: () => {
             '&&-lg': {
                 '@apply text-input-large': {};
                 '@apply rounded-button-lg': {};
+                '@apply h-48': {};
             };
             '&&-md': {
                 '@apply text-input-medium': {};
                 '@apply rounded-button-md': {};
+                '@apply h-40': {};
             };
             '&&-sm': {
                 '@apply text-input-small': {};
                 '@apply rounded-button-sm': {};
+                '@apply h-32': {};
+            };
+            '&[data-hasleftaddon="true"]': {
+                '@apply pl-0': {};
+                '@apply rounded-l-0': {};
+                '@apply border-l-0': {};
+            };
+            '&[data-hasrightaddon="true"]': {
+                '@apply pr-0': {};
+                '@apply rounded-r-0': {};
+                '@apply border-r-0': {};
             };
         };
         '@apply border-1': {};

package/dist/types/components/logo.d.ts

@@ -18,7 +18,7 @@ export declare const Logo: () => {
             '@apply h-60': {};
             '@apply pb-4': {};
             '.sk-logo-figure': {
-                '@apply w-auto h-56': {};
+                '@apply w-34 h-56': {};
             };
         };
         'a:focus-within &': {

package/dist/types/components/tabs.d.ts

@@ -40,7 +40,7 @@ export declare const Tabs: (colors: string[]) => {
                     };
                 };
                 '.sk-tabs-list-item-divider': {
-                    '@apply m-0 min-h-2 h-2 rounded-t-24 opacity-0': {};
+                    '@apply m-0 min-h-2 h-2 opacity-0': {};
                 };
                 '&[data-current="true"]': {
                     '.sk-tabs-list-item-divider': {

package/dist/types/components/text-editor.d.ts

@@ -0,0 +1,117 @@
+export declare const TextEditor: () => {
+    '.sk-texteditor': {
+        '.ql-toolbar.ql-snow': {
+            '@apply flex items-center bg-background-200 rounded-t-xl border-input-field-outline h-[4rem] pl-4': {};
+            '.ql-stroke': {
+                '@apply stroke-dark-primary': {};
+            };
+            '.ql-fill': {
+                '@apply fill-dark-primary': {};
+            };
+            '.ql-divider': {
+                '@apply w-[0.1rem] h-[3.2rem] bg-divider mr-[1.2rem]': {};
+            };
+            '.tooltip-container': {
+                '@apply absolute z-10 top-full mt-0 left-1/2 -translate-x-1/2 invisible opacity-0 transition-opacity duration-200 ease-in-out whitespace-nowrap': {};
+            };
+            '.ql-formats': {
+                '@apply flex gap-4 mr-[1.2rem]': {};
+            };
+            svg: {
+                '@apply h-[2.0rem] w-[2.0rem]': {};
+            };
+            button: {
+                '@apply h-[3.2rem] w-[3.2rem] rounded-10 text-dark-primary': {};
+                '&:hover, &:hover:focus-visible': {
+                    '@apply bg-tertiary-surface-hover': {};
+                };
+                '&:focus-visible': {
+                    '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 bg-background-content': {};
+                };
+                '&.ql-active': {
+                    '@apply bg-tertiary-surface-hover': {};
+                    '.ql-fill': {
+                        '@apply fill-dark-primary': {};
+                    };
+                    '.ql-stroke': {
+                        '@apply stroke-dark-primary': {};
+                    };
+                };
+                '&:hover .ql-fill, &:focus-visible .ql-fill': {
+                    '@apply fill-dark-primary': {};
+                };
+                '&:hover .ql-stroke, &:focus-visible .ql-stroke': {
+                    '@apply stroke-dark-primary': {};
+                };
+                '&:hover .tooltip-container, &:focus-visible .tooltip-container': {
+                    '@apply visible opacity-100': {};
+                };
+            };
+            '&.ql-disabled': {
+                '@apply border-input-field-outline-disabled': {};
+                '.ql-fill': {
+                    '@apply fill-dark-disabled': {};
+                };
+                '.ql-stroke': {
+                    '@apply stroke-dark-disabled': {};
+                };
+                button: {
+                    '@apply bg-background-200 text-dark-disabled cursor-default': {};
+                    '&.ql-active': {
+                        '@apply bg-background-200 text-dark-disabled': {};
+                    };
+                    '&:hover': {
+                        '@apply bg-background-200 text-dark-disabled': {};
+                    };
+                    '&:hover .ql-fill': {
+                        '@apply fill-dark-disabled': {};
+                    };
+                    '&:hover .ql-stroke': {
+                        '@apply stroke-dark-disabled': {};
+                    };
+                    '&:hover .tooltip-container': {
+                        '@apply hidden opacity-0': {};
+                    };
+                };
+            };
+        };
+        '.ql-container.ql-snow': {
+            '@apply border-input-field-outline rounded-b-xl': {};
+            ':focus-visible': {
+                '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 rounded-b-xl': {};
+            };
+            '&.disable-toolbar': {
+                '@apply rounded-t-xl': {};
+                ':focus-visible': {
+                    '@apply rounded-t-xl': {};
+                };
+            };
+            '&.ql-disabled': {
+                '@apply bg-input-field-surface-disabled border-input-field-outline-disabled': {};
+            };
+        };
+        '.ql-tooltip.ql-editing': {
+            input: {
+                '@apply rounded-0': {};
+                '&:focus-visible': {
+                    '@apply rounded-0': {};
+                };
+            };
+        };
+        '.ql-snow .ql-tooltip.ql-editing a.ql-action::after': {
+            content: string;
+        };
+        '.ql-snow .ql-tooltip[data-mode=link]::before': {
+            content: string;
+        };
+        '.ql-snow .ql-tooltip::before': {
+            content: string;
+        };
+        '.ql-snow .ql-tooltip a.ql-action::after': {
+            content: string;
+        };
+        '.ql-snow .ql-tooltip a.ql-remove::before': {
+            content: string;
+        };
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "3.13.1",
+  "version": "3.15.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -29,17 +29,17 @@
     "build:types": "tsc -p ./tsconfig.production.json --emitDeclarationOnly --declaration --declarationDir dist/types"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.21",
     "clean-css": "^5.3.3",
-    "postcss": "^8.5.1",
-    "postcss-import": "^16.1.0"
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1"
   },
   "dependencies": {
-    "@sk-web-gui/theme": "2.5.0",
+    "@sk-web-gui/theme": "2.5.1",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.10",
     "mini-svg-data-uri": "^1.4.4",
     "tailwindcss": "^3.4.17"
   },
-  "gitHead": "cfc440ac8d50b382772e9d2a59d652d6dcf2c9bc"
+  "gitHead": "5891de69eb0ff49b5fa51720c5b0f81b467b7666"
 }