@sk-web-gui/core 3.0.0 → 3.1.0

package/dist/types/components/progress-stepper.d.ts

@@ -0,0 +1,60 @@
+export declare const ProgressStepper: () => {
+    '.sk-progress-stepper': {
+        '@apply flex justify-between': {};
+        hr: {
+            '@apply w-full mt-19': {};
+        };
+        '&-step': {
+            '@apply flex flex-col items-center': {};
+            '@apply gap-4': {};
+            '@apply w-auto': {};
+            '@apply shrink-0': {};
+            '@apply text-base leading-base text-dark-primary font-normal': {};
+            svg: {
+                '@apply w-20 h-20': {};
+            };
+            '&-wrapper': {
+                '@apply flex flex-row shrink w-full gap-4': {};
+                hr: {
+                    '@apply w-full grow shrink mt-19': {};
+                };
+            };
+            '&-box': {
+                '@apply box-border': {};
+                '@apply shrink-0': {};
+                '@apply h-40 w-40': {};
+                '@apply bg-secondary-surface': {};
+                '@apply flex justify-center items-center': {};
+                '@apply text-label-medium': {};
+                '@apply border-2 border-secondary-outline': {};
+                '@apply text-dark-secondary': {};
+                '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {};
+                '&[data-rounded="true"]': {
+                    '@apply rounded-full': {};
+                };
+                '&&-sm': {
+                    '@apply h-32 w-32 min-h-24 max-h-32 min-w-24 max-w-32': {};
+                    '@apply text-label-small': {};
+                };
+                '&&-md': {
+                    '@apply h-40 w-40 min-h-32 max-h-40 min-w-32 max-w-40': {};
+                };
+            };
+            '&[data-progress="current"]': {
+                '@apply font-bold': {};
+                '.sk-progress-stepper-step-box': {
+                    '@apply border-vattjom-surface-primary': {};
+                    '@apply bg-vattjom-surface-primary': {};
+                    '@apply text-vattjom-text-secondary': {};
+                };
+            };
+            '&[data-progress="done"]': {
+                '.sk-progress-stepper-step-box': {
+                    '@apply border-success-surface-primary': {};
+                    '@apply bg-success-surface-primary': {};
+                    '@apply text-success-text-secondary': {};
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,125 @@
+export declare const Radio: () => {
+    '.sk-form-radio': {
+        backgroundImage: string;
+        '@apply relative': {};
+        '@apply box-border': {};
+        '@apply bg-primitives-overlay-lighten-10': {};
+        '@apply dark:bg-primitives-overlay-darken-6': {};
+        '@apply border-1': {};
+        '@apply border-primitives-overlay-darken-6': {};
+        '@apply dark:border-primitives-overlay-lighten-6': {};
+        '@apply m-0': {};
+        '@apply h-24 w-24': {};
+        '@apply hover:after:content-[""]': {};
+        '@apply hover:border-primitives-overlay-darken-8': {};
+        '@apply hover:dark:border-primitives-overlay-lighten-4': {};
+        '&::after': {
+            '@apply absolute': {};
+            '@apply rounded-full': {};
+            '@apply bg-dark-placeholder': {};
+            '@apply m-5': {};
+            '@apply top-0 left-0 bottom-0 right-0': {};
+        };
+        '@apply focus-visible:ring': {};
+        '@apply focus-visible:bg-background-content': {};
+        '@apply focus-visible:border-background-content': {};
+        '@apply focus-visible:hover:border-background-content': {};
+        '&[aria-invalid="true"]': {
+            '@apply border-2': {};
+            '@apply border-error-surface-primary': {};
+            '@apply hover:border-2': {};
+            '@apply hover:border-error-surface-primary': {};
+        };
+        '&:checked, &[checked="true"]': {
+            '@apply bg-primitives-overlay-lighten-10': {};
+            '@apply dark:bg-primitives-overlay-darken-6': {};
+            '@apply hover:bg-primitives-overlay-lighten-10': {};
+            '@apply hover:dark:bg-primitives-overlay-darken-6': {};
+            '@apply focus:bg-primitives-overlay-lighten-10': {};
+            '@apply focus:dark:bg-primitives-overlay-darken-6': {};
+            '@apply text-primitives-overlay-lighten-10': {};
+            '@apply dark:text-primitives-overlay-darken-6': {};
+            '@apply hover:text-primitives-overlay-lighten-10': {};
+            '@apply hover:dark:text-primitives-overlay-darken-6': {};
+            '@apply focus:text-primitives-overlay-lighten-10': {};
+            '@apply focus:dark:text-primitives-overlay-darken-6': {};
+            '@apply border-primitives-overlay-darken-6': {};
+            '@apply focus:border-primitives-overlay-darken-6': {};
+            '@apply dark:border-primitives-overlay-lighten-6': {};
+            '@apply hover:border-primitives-overlay-darken-8': {};
+            '@apply hover:dark:border-primitives-overlay-lighten-4': {};
+            '@apply focus:outline-0': {};
+            '@apply focus:ring-0 focus:ring-offset-0': {};
+            '@apply focus-visible:ring': {};
+            '@apply focus-visible:border-transparent': {};
+            '@apply after:content-[""]': {};
+            '&[aria-invalid="true"]': {
+                '@apply border-2': {};
+                '@apply border-error-surface-primary': {};
+                '@apply hover:border-2': {};
+                '@apply hover:border-error-surface-primary': {};
+            };
+            '&::after': {
+                '@apply bg-dark-primary': {};
+            };
+        };
+        '&:active': {
+            '@apply ring-0 ring-offset-0': {};
+        };
+        '&:disabled, &[disabled="true"]': {
+            '@apply border-primitives-overlay-darken-3': {};
+            '@apply dark:border-primitives-overlay-lighten-3': {};
+            '@apply hover:border-primitives-overlay-darken-3': {};
+            '@apply hover:dark:border-primitives-overlay-lighten-3': {};
+            '@apply bg-background-200': {};
+            '@apply hover:bg-background-200': {};
+            '@apply cursor-not-allowed': {};
+            '&:not(:checked):not([checked="true"]):after': {
+                '@apply hidden': {};
+            };
+            '&:checked, &[checked="true"]': {
+                '&::after': {
+                    '@apply bg-dark-disabled': {};
+                };
+            };
+        };
+        '&-label': {
+            '@apply inline-flex align-top items-center': {};
+            '@apply font-normal': {};
+            '@apply p-2': {};
+            '&-sm': {
+                '@apply text-small': {};
+                '@apply h-28': {};
+                '@apply gap-10': {};
+            };
+            '&-md': {
+                '@apply text-base': {};
+                '@apply h-28': {};
+                '@apply gap-10': {};
+            };
+            '&-lg': {
+                '@apply text-large': {};
+                '@apply h-30': {};
+                '@apply gap-12': {};
+            };
+            '&[data-disabled="true"]': {
+                '@apply text-dark-disabled': {};
+            };
+        };
+        '&-group': {
+            '@apply flex flex-row': {};
+            '&[data-direction="column"]': {
+                '@apply flex-col': {};
+            };
+            '&-sm': {
+                '@apply gap-12': {};
+            };
+            '&-md': {
+                '@apply gap-16': {};
+            };
+            '&-lg': {
+                '@apply gap-16': {};
+            };
+        };
+    };
+};

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

@@ -0,0 +1,226 @@
+export declare const RichTextEditor: () => {
+    ".sk-rich-text-editor": {
+        "@apply h-full": {};
+        "@apply box-border": {};
+        ".sk-divider-vertical": {
+            "@apply my-4": {};
+        };
+        ".toolbar": {
+            "@apply bg-background-200": {};
+            "@apply rounded-t": {};
+            "@apply border-1 border-divider": {};
+            "@apply border-b-0": {};
+            "@apply py-0": {};
+            "@apply px-8": {};
+            "@apply flex": {};
+            ".ql-formats": {
+                "@apply py-4": {};
+                "@apply mt-4": {};
+                "@apply mr-14": {};
+                "@apply inline-block": {};
+                "@apply align-middle": {};
+                "@apply flex": {};
+                button: {
+                    "@apply inline": {};
+                    "@apply text-dark-secondary": {};
+                    "@apply rounded-button-sm": {};
+                    "@apply h-32 w-32": {};
+                    "@apply flex justify-center items-center": {};
+                    svg: {
+                        "@apply w-20 h-20": {};
+                    };
+                    ".ql-fill": {
+                        fill: string;
+                    };
+                    ".ql-stroke": {
+                        stroke: string;
+                        fill: string;
+                        strokeLinecap: string;
+                        strokeLinejoin: string;
+                        strokeWidth: string;
+                    };
+                    "&:hover": {};
+                    "&.ql-active:hover": {
+                        "@apply text-dark-primary": {};
+                        "@apply bg-tertiary-surface-hover": {};
+                        ".ql-fill": {
+                            fill: string;
+                        };
+                        ".ql-stroke": {
+                            stroke: string;
+                        };
+                    };
+                    "&.ql-active": {
+                        "@apply text-dark-primary": {};
+                        "@apply bg-inverted-vattjom-surface-primary": {};
+                        ".ql-fill": {
+                            fill: string;
+                        };
+                        ".ql-stroke": {
+                            stroke: string;
+                        };
+                    };
+                };
+            };
+            "input.ql-image[type=file]": {
+                "@apply hidden": {};
+            };
+        };
+        ".ql-editor": {
+            "@apply bg-background-content text-dark-primary": {};
+            "@apply rounded-b-button": {};
+            "@apply border-divider": {};
+            "@apply p-14": {};
+            "@apply text-left": {};
+            "@apply break-words": {};
+            "@apply overflow-y-auto": {};
+            "@apply h-full": {};
+            "@apply whitespace-pre-wrap": {};
+            "@apply font-sans": {};
+            a: {
+                "@apply underline": {};
+            };
+            ul: {
+                "@apply pl-28": {};
+                "@apply list-disc": {};
+                counterReset: string;
+            };
+            "li:not(.ql-direction-rtl)::before": {
+                "@apply text-right": {};
+            };
+            ".ql-editor ol li:before": {
+                content: string;
+            };
+            ol: {
+                "@apply pl-28": {};
+                "@apply list-decimal": {};
+            };
+            "ol li": {
+                counterReset: string;
+                counterIncrement: string;
+            };
+        };
+        ".ql-clipboard": {
+            left: string;
+            "@apply h-px": {};
+            "@apply overflow-y-hidden": {};
+            "@apply absolute": {};
+            "@apply top-1/2": {};
+        };
+        ".ql-tooltip.ql-editing input[type=text]": {
+            "@apply inline-block": {};
+        };
+        ".ql-tooltip input[type=text]": {
+            "@apply hidden": {};
+            "@apply border-1 border-divider": {};
+            "@apply text-base": {};
+        };
+        ".ql-tooltip.ql-editing a.ql-preview": {
+            display: string;
+        };
+        ".ql-editor .ql-indent-1:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-2:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-3:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-4:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-5:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-6:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-7:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-8:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-9:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-direction.ql-active svg:first-child": {
+            display: string;
+        };
+        ".ql-editor .ql-direction-rtl": {
+            direction: string;
+        };
+        ".ql-direction.ql-active svg:last-child": {
+            display: string;
+        };
+        ".ql-editor .ql-align-center": {
+            "@apply text-center": {};
+        };
+        ".ql-editor .ql-align-right": {
+            textAlign: string;
+        };
+        ".ql-editor .ql-align-justify": {
+            "@apply text-justify": {};
+        };
+        ".ql-tooltip": {
+            "@apply bg-background-100": {};
+            "@apply rounded": {};
+            "@apply shadow-md": {};
+            "@apply border-1 border-divider": {};
+            "@apply p-5": {};
+            "@apply font-sans": {};
+            "@apply absolute": {};
+            transform: string;
+            ".ql-tooltip a": {
+                "@apply cursor-pointer": {};
+            };
+            "a.ql-preview": {
+                "@apply inline-block": {};
+                "@apply overflow-x-hidden": {};
+                "@apply text-ellipsis": {};
+                "@apply align-top": {};
+                "@apply max-w-52": {};
+            };
+            "a.ql-remove::before": {
+                content: string;
+                "@apply ml-8": {};
+            };
+        };
+        ".ql-tooltip[data-mode=link]::before": {
+            "@apply mr-16": {};
+            content: string;
+        };
+        "a.ql-action::after": {
+            "@apply border-r-1 border-divider": {};
+            content: string;
+            "@apply ml-16": {};
+            "@apply pr-8": {};
+        };
+        ".ql-tooltip.ql-editing a.ql-action::after": {
+            "@apply ml-16": {};
+            content: string;
+        };
+        ".ql-tooltip::before": {
+            content: string;
+            "@apply mr-8": {};
+        };
+        ".ql-formats:after": {
+            content: string;
+            display: string;
+            clear: string;
+        };
+        ".quill": {
+            ".ql-container": {
+                "@apply border-1 border-divider": {};
+                "@apply h-full": {};
+            };
+            ".ql-hidden": {
+                "@apply hidden": {};
+            };
+            "pre.ql-container": {
+                "@apply rounded-b-button": {};
+            };
+        };
+    };
+};

package/dist/types/components/search-field.d.ts

@@ -0,0 +1,34 @@
+export declare const SearchField: () => {
+    '.sk-search-field-suggestions': {
+        '&.sk-form-combobox': {
+            '@apply h-auto': {};
+        };
+        '.sk-form-combobox': {
+            '&-list': {
+                '&-option': {
+                    '.sk-icon': {
+                        '@apply hidden': {};
+                    };
+                };
+            };
+        };
+    };
+    '.sk-search-field': {
+        '&-md': {
+            '.sk-search-field-icon': {
+                '@apply w-20 h-20': {};
+                svg: {
+                    '@apply w-20 h-20': {};
+                };
+            };
+        };
+        '&-lg': {
+            '.sk-search-field-icon': {
+                '@apply w-22 h-22': {};
+                svg: {
+                    '@apply w-22 h-22': {};
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,141 @@
+export declare const Select: () => {
+    '.sk-form-select': {
+        '*': {
+            '@apply bg-background-content': {};
+        };
+        '&[aria-invalid="true"]': {
+            '@apply border-2 border-error-surface-primary': {};
+        };
+        '&[aria-disabled="true"]': {
+            '@apply opacity-100': {};
+            '@apply text-dark-disabled': {};
+            '@apply placeholder:text-dark-disabled': {};
+            '@apply bg-tertiary-surface-disabled': {};
+            backgroundImage: string[];
+        };
+        '&-sm': {
+            '@apply h-32': {};
+            '@apply text-label-small': {};
+            '@apply rounded-button-sm': {};
+            '*': {
+                '@apply text-input-small': {};
+            };
+        };
+        '&-md': {
+            '@apply h-40': {};
+            '@apply text-label-medium': {};
+            '@apply rounded-button-md': {};
+            '*': {
+                '@apply text-input-medium': {};
+            };
+        };
+        '&-lg': {
+            '@apply h-48': {};
+            '@apply text-label-large': {};
+            '@apply rounded-button-lg': {};
+            '*': {
+                '@apply text-input-large': {};
+            };
+        };
+        '&-primary': {
+            '@apply border-1': {};
+            '@apply border-primitives-overlay-darken-6': {};
+            '@apply dark:border-primitives-overlay-lighten-6': {};
+            '@apply hover:border-primitives-overlay-darken-8': {};
+            '@apply dark:hover:border-primitives-overlay-lighten-4': {};
+            '@apply bg-primitives-overlay-lighten-10': {};
+            '@apply dark:bg-primitives-overlay-darken-6': {};
+            '@apply hover:bg-primitives-overlay-lighten-10': {};
+            '@apply dark:hover:bg-primitives-overlay-darken-6': {};
+            '&.sk-form-select-sm': {
+                '@apply pl-13': {};
+                '@apply bg-[center_right_0.643em]': {};
+                '@apply pr-34-1': {};
+                '&[aria-invalid="true"]': {
+                    '@apply pl-12': {};
+                    '@apply bg-right-8': {};
+                    '@apply pr-32': {};
+                };
+            };
+            '&.sk-form-select-md': {
+                '@apply pl-17': {};
+                '@apply bg-[center_right_0.8125em]': {};
+                '@apply pr-44-1': {};
+                '&[aria-invalid="true"]': {
+                    '@apply pl-16': {};
+                    '@apply bg-right-12': {};
+                    '@apply pr-42': {};
+                };
+            };
+            '&.sk-form-select-lg': {
+                '@apply pl-19': {};
+                '@apply bg-[center_right_0.944em]': {};
+                '@apply pr-50-1': {};
+                '&[aria-invalid="true"]': {
+                    '@apply pl-18': {};
+                    '@apply bg-right-16': {};
+                    '@apply pr-48': {};
+                };
+            };
+            '&[aria-disabled="true"]': {
+                '@apply bg-primitives-overlay-darken-1': {};
+                '@apply dark:bg-primitives-overlay-lighten-1': {};
+                '@apply border-primitives-overlay-darken-3': {};
+                '@apply dark:border-primitives-overlay-lighten-3': {};
+                '@apply hover:border-primitives-overlay-darken-3': {};
+                '@apply dark:hover:border-primitives-overlay-lighten-3': {};
+            };
+        };
+        '&-tertiary': {
+            '@apply border-2': {};
+            '@apply bg-tertiary-surface': {};
+            '@apply hover:bg-tertiary-surface-hover': {};
+            '@apply border-transparent': {};
+            '&.sk-form-select-sm': {
+                '@apply pl-12': {};
+                '@apply bg-right-8': {};
+                '@apply pr-32': {};
+            };
+            '&.sk-form-select-md': {
+                '@apply pl-16': {};
+                '@apply bg-right-12': {};
+                '@apply pr-42': {};
+            };
+            '&.sk-form-select-lg': {
+                '@apply pl-18': {};
+                '@apply bg-right-16': {};
+                '@apply pr-48': {};
+            };
+            '&[aria-disabled="true"]': {
+                '@apply bg-tertiary-surface-disabled': {};
+            };
+        };
+        '@apply h-fit': {};
+        '@apply w-fit': {};
+        '@apply box-border': {};
+        '@apply focus:border-transparent': {};
+        '@apply rounded-button': {};
+        '@apply text-dark-secondary': {};
+        '@apply placeholder:text-dark-secondary': {};
+        '@apply hover:placeholder:text-dark-primary': {};
+        '@apply focus:placeholder:text-dark-primary': {};
+        '@apply hover:text-dark-primary': {};
+        '@apply focus:text-dark-primary': {};
+        '@apply py-6': {};
+        '@apply focus:ring focus:ring-ring focus:ring-offset': {};
+        '@apply focus:outline-0': {};
+        backgroundImage: string[];
+        '&:hover, &:focus': {
+            backgroundImage: string[];
+        };
+    };
+    '.dark .sk-form-select': {
+        backgroundImage: string[];
+        '&:hover, &:focus': {
+            backgroundImage: string[];
+        };
+        '&[aria-disabled="true"]': {
+            backgroundImage: string[];
+        };
+    };
+};