mosuk-ui 1.0.2 → 1.0.3

package/components/texts/h5/component/index.d.ts

@@ -1,19 +1,6 @@
 import { H5 as BaseH5 } from './component';
 import type { H5Props } from './component.interface';
-import { H5Icon } from './icon/component';
-import { H5IconProps } from './icon/component.interface';
-import { H5Text } from './text/component';
-import { H5TextProps } from './text/component.interface';
-export declare const H5: typeof BaseH5 & {
-    Icon: typeof H5Icon;
-    Text: typeof H5Text;
-};
+export declare const H5: typeof BaseH5;
 export declare namespace H5 {
     type Props = H5Props;
-    namespace Icon {
-        type Props = H5IconProps;
-    }
-    namespace Text {
-        type Props = H5TextProps;
-    }
 }

package/components/texts/h5/component/index.js

@@ -1,7 +1,2 @@
 import { H5 as BaseH5 } from './component';
-import { H5Icon } from './icon/component';
-import { H5Text } from './text/component';
-export var H5 = Object.assign(BaseH5, {
-    Icon: H5Icon,
-    Text: H5Text,
-});
+export var H5 = BaseH5;

package/components/texts/h5/skeleton/component.d.ts

@@ -1,3 +1,3 @@
 import React, { ElementType } from 'react';
 import { H5SkeletonProps } from './component.interface';
-export declare function H5Skeleton<C extends ElementType = 'div'>({ as, ...rest }: H5SkeletonProps<C>): React.JSX.Element;
+export declare function H5Skeleton<C extends ElementType = 'h5'>({ as, ...rest }: H5SkeletonProps<C>): React.JSX.Element;

package/components/texts/h5/skeleton/component.interface.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
-export type H5SkeletonProps<C extends ElementType = 'div'> = {
+export type H5SkeletonProps<C extends ElementType = 'h5'> = {
     as?: C;
     ref?: Ref<any>;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/texts/h5/skeleton/component.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
+import { Skeleton } from '../../../display/skeleton/component/component';
 import styles from './component.module.css';
 export function H5Skeleton(_a) {
     var as = _a.as, rest = __rest(_a, ["as"]);
-    var Component = (as || 'div');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-h5-skeleton', styles.h5, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    var Component = (as || 'h5');
+    return (React.createElement(Skeleton, __assign({}, rest, { as: Component, className: classNames('mosuk-h5-skeleton', styles.h5, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/texts/h5/skeleton/component.module.css

@@ -1,60 +1,16 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-11 {
         .h5 {
-            display: block;
+            display: inline-block;
 
             width: 100%;
+            height: 1.2em;
+            min-height: 1.2em;
 
             font-size: var(--text-xs, 0.75rem);
-            text-align: start;
-            line-height: 0;
+            line-height: var(--leading-none, 1);
 
-            .text {
-                display: inline-flex;
-
-                width: 100%;
-                height: 1.2em;
-                min-height: 1.2em;
-
-                line-height: 0;
-
-                border-radius: calc(infinity * 1px);
-            }
-
-            &:has(.icon) {
-                .text {
-                    display: inline-flex;
-
-                    width: 50%;
-                    max-width: calc(100% - calc(var(--spacing, .25rem) * 6) - calc(var(--spacing, .25rem) * 1.75));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.20em;
-                    margin-left: calc(var(--spacing, .25rem) * 1.75);
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .h5 {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 6);
-                    height: calc(var(--spacing, .25rem) * 6);
-                    min-width: calc(var(--spacing, .25rem) * 6);
-                    min-height: calc(var(--spacing, .25rem) * 6);
-                    font-size: var(--text-base, 1rem);
-
-                    padding: calc(var(--spacing, .25rem) * 1.75);
-
-                    cursor: default;
-                }
-            }
+            border-radius: calc(infinity * 1px);
         }
     }
 }

package/components/texts/h5/skeleton/index.d.ts

@@ -1,19 +1,6 @@
 import { H5Skeleton as BaseH5Skeleton } from './component';
-import { H5SkeletonProps } from './component.interface';
-import { H5IconSKeleton } from './icon/component';
-import { H5IconSkeletonProps } from './icon/component.interface';
-import { H5TextSkeleton } from './text/component';
-import { H5TextSkeletonProps } from './text/component.interface';
-export declare const H5Skeleton: typeof BaseH5Skeleton & {
-    Icon: typeof H5IconSKeleton;
-    Text: typeof H5TextSkeleton;
-};
-export declare namespace H5 {
+import type { H5SkeletonProps } from './component.interface';
+export declare const H5Skeleton: typeof BaseH5Skeleton;
+export declare namespace H5Skeleton {
     type Props = H5SkeletonProps;
-    namespace Icon {
-        type Props = H5IconSkeletonProps;
-    }
-    namespace Text {
-        type Props = H5TextSkeletonProps;
-    }
 }

package/components/texts/h5/skeleton/index.js

@@ -1,7 +1,2 @@
 import { H5Skeleton as BaseH5Skeleton } from './component';
-import { H5IconSKeleton } from './icon/component';
-import { H5TextSkeleton } from './text/component';
-export var H5Skeleton = Object.assign(BaseH5Skeleton, {
-    Icon: H5IconSKeleton,
-    Text: H5TextSkeleton,
-});
+export var H5Skeleton = BaseH5Skeleton;

package/components/texts/h6/component/component.module.css

@@ -1,11 +1,8 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-12 {
         .h6 {
-            display: block;
-
             font-size: var(--text-2xs, 0.625rem);
             font-weight: 500;
-            text-align: start;
             line-height: var(--leading-relaxed, 1.625);
 
             transition: all 200ms ease-in-out;
@@ -13,43 +10,6 @@
             &:not(:hover) {
                 transition: all 600ms ease-in-out;
             }
-
-            &:has(.icon) {
-                line-height: 0;
-
-                .text {
-                    display: inline-flex;
-
-                    width: auto;
-                    max-width: calc(100% - calc(var(--spacing, .25rem) * 5) - calc(var(--spacing, .25rem) * 1.5));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.15em;
-                    margin-left: calc(var(--spacing, .25rem) * 1.5);
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .h6 {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 5);
-                    height: calc(var(--spacing, .25rem) * 5);
-                    min-width: calc(var(--spacing, .25rem) * 5);
-                    min-height: calc(var(--spacing, .25rem) * 5);
-                    font-size: var(--text-xs, 0.75rem);
-
-                    padding: calc(var(--spacing, .25rem) * 1.5);
-
-                    cursor: default;
-                }
-            }
         }
     }
 }

package/components/texts/h6/component/index.d.ts

@@ -1,19 +1,6 @@
 import { H6 as BaseH6 } from './component';
 import type { H6Props } from './component.interface';
-import { H6Icon } from './icon/component';
-import { H6IconProps } from './icon/component.interface';
-import { H6Text } from './text/component';
-import { H6TextProps } from './text/component.interface';
-export declare const H6: typeof BaseH6 & {
-    Icon: typeof H6Icon;
-    Text: typeof H6Text;
-};
+export declare const H6: typeof BaseH6;
 export declare namespace H6 {
     type Props = H6Props;
-    namespace Icon {
-        type Props = H6IconProps;
-    }
-    namespace Text {
-        type Props = H6TextProps;
-    }
 }

package/components/texts/h6/component/index.js

@@ -1,7 +1,2 @@
 import { H6 as BaseH6 } from './component';
-import { H6Icon } from './icon/component';
-import { H6Text } from './text/component';
-export var H6 = Object.assign(BaseH6, {
-    Icon: H6Icon,
-    Text: H6Text,
-});
+export var H6 = BaseH6;

package/components/texts/h6/skeleton/component.d.ts

@@ -1,3 +1,3 @@
 import React, { ElementType } from 'react';
 import { H6SkeletonProps } from './component.interface';
-export declare function H6Skeleton<C extends ElementType = 'div'>({ as, ...rest }: H6SkeletonProps<C>): React.JSX.Element;
+export declare function H6Skeleton<C extends ElementType = 'h6'>({ as, ...rest }: H6SkeletonProps<C>): React.JSX.Element;

package/components/texts/h6/skeleton/component.interface.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
-export type H6SkeletonProps<C extends ElementType = 'div'> = {
+export type H6SkeletonProps<C extends ElementType = 'h6'> = {
     as?: C;
     ref?: Ref<any>;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/texts/h6/skeleton/component.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
+import { Skeleton } from '../../../display/skeleton/component/component';
 import styles from './component.module.css';
 export function H6Skeleton(_a) {
     var as = _a.as, rest = __rest(_a, ["as"]);
-    var Component = (as || 'div');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-h6-skeleton', styles.h6, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    var Component = (as || 'h6');
+    return (React.createElement(Skeleton, __assign({}, rest, { as: Component, className: classNames('mosuk-h6-skeleton', styles.h6, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/texts/h6/skeleton/component.module.css

@@ -1,60 +1,16 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-11 {
         .h6 {
-            display: block;
+            display: inline-block;
 
             width: 100%;
+            height: 1.2em;
+            min-height: 1.2em;
 
-            font-size: var(--text-2xs, 0.625rem);
-            text-align: start;
-            line-height: 0;
+            font-size: var(--text-xs, 0.75rem);
+            line-height: var(--leading-none, 1);
 
-            .text {
-                display: inline-flex;
-
-                width: 100%;
-                height: 1.2em;
-                min-height: 1.2em;
-
-                line-height: 0;
-
-                border-radius: calc(infinity * 1px);
-            }
-
-            &:has(.icon) {
-                .text {
-                    display: inline-flex;
-
-                    width: 50%;
-                    max-width: calc(100% - calc(var(--spacing, .25rem) * 5) - calc(var(--spacing, .25rem) * 1.5));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.15em;
-                    margin-left: calc(var(--spacing, .25rem) * 1.5);
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .h6 {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 5);
-                    height: calc(var(--spacing, .25rem) * 5);
-                    min-width: calc(var(--spacing, .25rem) * 5);
-                    min-height: calc(var(--spacing, .25rem) * 5);
-                    font-size: var(--text-xs, 0.75rem);
-
-                    padding: calc(var(--spacing, .25rem) * 1.5);
-
-                    cursor: default;
-                }
-            }
+            border-radius: calc(infinity * 1px);
         }
     }
 }

package/components/texts/h6/skeleton/index.d.ts

@@ -1,19 +1,6 @@
 import { H6Skeleton as BaseH6Skeleton } from './component';
-import { H6SkeletonProps } from './component.interface';
-import { H6IconSKeleton } from './icon/component';
-import { H6IconSkeletonProps } from './icon/component.interface';
-import { H6TextSkeleton } from './text/component';
-import { H6TextSkeletonProps } from './text/component.interface';
-export declare const H6Skeleton: typeof BaseH6Skeleton & {
-    Icon: typeof H6IconSKeleton;
-    Text: typeof H6TextSkeleton;
-};
-export declare namespace H6 {
+import type { H6SkeletonProps } from './component.interface';
+export declare const H6Skeleton: typeof BaseH6Skeleton;
+export declare namespace H6Skeleton {
     type Props = H6SkeletonProps;
-    namespace Icon {
-        type Props = H6IconSkeletonProps;
-    }
-    namespace Text {
-        type Props = H6TextSkeletonProps;
-    }
 }

package/components/texts/h6/skeleton/index.js

@@ -1,7 +1,2 @@
 import { H6Skeleton as BaseH6Skeleton } from './component';
-import { H6IconSKeleton } from './icon/component';
-import { H6TextSkeleton } from './text/component';
-export var H6Skeleton = Object.assign(BaseH6Skeleton, {
-    Icon: H6IconSKeleton,
-    Text: H6TextSkeleton,
-});
+export var H6Skeleton = BaseH6Skeleton;

package/components/texts/p/component/component.module.css

@@ -1,11 +1,8 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-12 {
         .p {
-            display: block;
-
             font-size: var(--text-sm, 0.875rem);
             font-weight: 400;
-            text-align: start;
             line-height: var(--leading-relaxed, 1.625);
 
             transition: all 200ms ease-in-out;
@@ -13,43 +10,6 @@
             &:not(:hover) {
                 transition: all 600ms ease-in-out;
             }
-
-            &:has(.icon) {
-                line-height: 0;
-
-                .text {
-                    display: inline-flex;
-
-                    width: auto;
-                    max-width: calc(100% - calc(var(--spacing, .25rem) * 7) - calc(var(--spacing, .25rem) * 2));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.20em;
-                    margin-left: calc(var(--spacing, .25rem) * 2);
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .p {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 7);
-                    height: calc(var(--spacing, .25rem) * 7);
-                    min-width: calc(var(--spacing, .25rem) * 7);
-                    min-height: calc(var(--spacing, .25rem) * 7);
-                    font-size: var(--text-base, 1rem);
-
-                    padding: calc(var(--spacing, .25rem) * 2);
-
-                    cursor: default;
-                }
-            }
         }
     }
 }

package/components/texts/p/component/index.d.ts

@@ -1,19 +1,6 @@
 import { P as BaseP } from './component';
 import type { PProps } from './component.interface';
-import { PIcon } from './icon/component';
-import { PIconProps } from './icon/component.interface';
-import { PText } from './text/component';
-import { PTextProps } from './text/component.interface';
-export declare const P: typeof BaseP & {
-    Icon: typeof PIcon;
-    Text: typeof PText;
-};
+export declare const P: typeof BaseP;
 export declare namespace P {
     type Props = PProps;
-    namespace Icon {
-        type Props = PIconProps;
-    }
-    namespace Text {
-        type Props = PTextProps;
-    }
 }

package/components/texts/p/component/index.js

@@ -1,7 +1,2 @@
 import { P as BaseP } from './component';
-import { PIcon } from './icon/component';
-import { PText } from './text/component';
-export var P = Object.assign(BaseP, {
-    Icon: PIcon,
-    Text: PText,
-});
+export var P = BaseP;

package/components/texts/p/skeleton/component.d.ts

@@ -1,3 +1,3 @@
 import React, { ElementType } from 'react';
 import { PSkeletonProps } from './component.interface';
-export declare function PSkeleton<C extends ElementType = 'div'>({ as, ...rest }: PSkeletonProps<C>): React.JSX.Element;
+export declare function PSkeleton<C extends ElementType = 'p'>({ as, ...rest }: PSkeletonProps<C>): React.JSX.Element;

package/components/texts/p/skeleton/component.interface.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
-export type PSkeletonProps<C extends ElementType = 'div'> = {
+export type PSkeletonProps<C extends ElementType = 'p'> = {
     as?: C;
     ref?: Ref<any>;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/texts/p/skeleton/component.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
+import { Skeleton } from '../../../display/skeleton/component/component';
 import styles from './component.module.css';
 export function PSkeleton(_a) {
     var as = _a.as, rest = __rest(_a, ["as"]);
-    var Component = (as || 'div');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-p-skeleton', styles.p, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    var Component = (as || 'p');
+    return (React.createElement(Skeleton, __assign({}, rest, { as: Component, className: classNames('mosuk-p-skeleton', styles.p, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/texts/p/skeleton/component.module.css

@@ -1,60 +1,16 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-11 {
         .p {
-            display: block;
+            display: inline-block;
 
             width: 100%;
+            height: 1.2em;
+            min-height: 1.2em;
 
             font-size: var(--text-sm, 0.875rem);
-            text-align: start;
-            line-height: 0;
+            line-height: var(--leading-none, 1);
 
-            .text {
-                display: inline-flex;
-
-                width: 100%;
-                height: 1.2em;
-                min-height: 1.2em;
-
-                line-height: 0;
-
-                border-radius: calc(infinity * 1px);
-            }
-
-            &:has(.icon) {
-                .text {
-                    display: inline-flex;
-
-                    width: 50%;
-                    max-width: calc(100% - calc(var(--spacing, .25rem) * 7) - calc(var(--spacing, .25rem) * 2));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.4em;
-                    margin-left: calc(var(--spacing, .25rem) * 2);
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .p {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 7);
-                    height: calc(var(--spacing, .25rem) * 7);
-                    min-width: calc(var(--spacing, .25rem) * 7);
-                    min-height: calc(var(--spacing, .25rem) * 7);
-                    font-size: var(--text-base, 1rem);
-
-                    padding: calc(var(--spacing, .25rem) * 2);
-
-                    cursor: default;
-                }
-            }
+            border-radius: calc(infinity * 1px);
         }
     }
 }

package/components/texts/p/skeleton/index.d.ts

@@ -1,19 +1,6 @@
 import { PSkeleton as BasePSkeleton } from './component';
-import { PSkeletonProps } from './component.interface';
-import { PIconSKeleton } from './icon/component';
-import { PIconSkeletonProps } from './icon/component.interface';
-import { PTextSkeleton } from './text/component';
-import { PTextSkeletonProps } from './text/component.interface';
-export declare const PSkeleton: typeof BasePSkeleton & {
-    Icon: typeof PIconSKeleton;
-    Text: typeof PTextSkeleton;
-};
+import type { PSkeletonProps } from './component.interface';
+export declare const PSkeleton: typeof BasePSkeleton;
 export declare namespace PSkeleton {
     type Props = PSkeletonProps;
-    namespace Icon {
-        type Props = PIconSkeletonProps;
-    }
-    namespace Text {
-        type Props = PTextSkeletonProps;
-    }
 }

package/components/texts/p/skeleton/index.js

@@ -1,7 +1,2 @@
 import { PSkeleton as BasePSkeleton } from './component';
-import { PIconSKeleton } from './icon/component';
-import { PTextSkeleton } from './text/component';
-export var PSkeleton = Object.assign(BasePSkeleton, {
-    Icon: PIconSKeleton,
-    Text: PTextSkeleton,
-});
+export var PSkeleton = BasePSkeleton;

package/index.css

@@ -1,4 +1,4 @@
-/* ! === Layer === ! */
+/* === Layers === */
 @layer theme, base, mosuk-ui, components, utilities;
 
 @layer mosuk-ui {
@@ -14,21 +14,43 @@
     @layer index-90, index-91, index-92, index-93, index-94, index-95, index-96, index-97, index-98, index-99;
 }
 
-/* ! === Imports === ! */
+
+
+/* === Imports === */
 
 @import "tailwindcss";
+@import './styles/style.css';
 
-@import './styles/theme/html/style.css';
 
-@import './styles/utilities/icons/icon.css';
-@import './styles/utilities/buttons/button.css';
-@import './styles/utilities/scrollbars/scrollbar.css';
-@import './styles/utilities/inputs/input.css';
-@import './styles/utilities/inputs/textarea.css';
 
-/* ! === Theme === ! */
+/* === Theme === */
 
 @theme {
+    --spacing: 0.25rem;
+
+    --container-3xs: 16rem;
+    --container-2xs: 18rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
+
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-4xl: 2rem;
+
     --color-red-50: oklch(0.971 0.013 17.38);
     --color-red-100: oklch(0.936 0.032 17.717);
     --color-red-200: oklch(0.885 0.062 18.334);
@@ -104,5 +126,9 @@
     --color-primary-900: #003b80;
 }
 
+
+
+/* === Custom Variants === */
+
 @custom-variant hover (&:hover);
 @custom-variant not-hover (&:not(:hover));