@sk-web-gui/core 2.3.0 → 2.4.0

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

@@ -0,0 +1,60 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+export interface CardProps extends DefaultProps, Omit<React.ComponentPropsWithRef<'div'>, 'color'> {
+    /** React node */
+    children?: React.ReactNode;
+    /** Set background color to card
+     * @default mono
+     */
+    color?: 'mono' | 'tertiary' | 'vattjom' | 'gronsta' | 'bjornstigen' | 'juniskar';
+    /** Make the card inverted
+     * @default false
+     */
+    invert?: boolean;
+    /** Change layout of card
+     * @default vertical
+     */
+    layout?: 'vertical' | 'horizontal';
+    /** If the card should be clickable, will apply hover style
+     * @default false;
+     */
+    useHoverEffect?: boolean;
+    /** Make the card linkable
+     */
+    href?: string;
+}
+export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface CardImageProps extends DefaultProps, React.ComponentPropsWithRef<'img'> {
+    /** React node */
+    children?: React.ReactNode;
+    /** The image `src` attribute */
+    src?: string;
+    /** The alt text for the image */
+    alt?: string;
+    /** Make the card inverted */
+    inverted?: string;
+}
+export declare const CardImage: React.ForwardRefExoticComponent<Omit<CardImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export interface CardBodyProps extends DefaultProps, Omit<React.ComponentPropsWithRef<'div'>, 'color'>, Pick<CardProps, 'color'> {
+    /** React node */
+    children?: React.ReactNode;
+    /** Make the card inverted */
+    inverted?: string;
+}
+export declare const CardBody: React.ForwardRefExoticComponent<Omit<CardBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface CardMetaProps extends DefaultProps, React.ComponentPropsWithRef<'div'> {
+    /** Insert date object and it will apply date and time to the card */
+    datetime?: Date;
+}
+export declare const CardMeta: React.ForwardRefExoticComponent<Omit<CardMetaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface CardHeaderProps extends DefaultProps, React.ComponentPropsWithRef<'div'> {
+    /** React node */
+    children?: React.ReactNode;
+}
+export declare const CardHeader: React.ForwardRefExoticComponent<Omit<CardHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface CardTextProps extends DefaultProps, React.ComponentPropsWithRef<'div'> {
+    /** React node */
+    children?: React.ReactNode;
+}
+export declare const CardText: React.ForwardRefExoticComponent<Omit<CardTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Card;

package/dist/types/card/src/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Card as InternalCard, CardProps as InternalCardProps, CardImage, CardBody, CardHeader, CardText, CardMeta } from './card';
+import { MetaCard as InternalMetaCard, MetaCardProps as InternalMetaCardProps, MetaCardBody, MetaCardHeader, MetaCardText } from './meta-card';
+interface CardProps extends React.ForwardRefExoticComponent<InternalCardProps> {
+    Component: typeof InternalCard;
+    Image: typeof CardImage;
+    Body: typeof CardBody;
+    Header: typeof CardHeader;
+    Text: typeof CardText;
+    Meta: typeof CardMeta;
+}
+interface MetaCardProps extends React.ForwardRefExoticComponent<InternalMetaCardProps> {
+    Component: typeof InternalMetaCard;
+    Body: typeof MetaCardBody;
+    Header: typeof MetaCardHeader;
+    Text: typeof MetaCardText;
+}
+export declare const Card: CardProps;
+export declare const MetaCard: MetaCardProps;
+export type { CardProps, MetaCardProps };
+export default Card;

package/dist/types/card/src/meta-card.d.ts

@@ -0,0 +1,42 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+interface IMetaCardProps extends DefaultProps {
+    /** React node */
+    children?: React.ReactNode;
+    /** Set background color to card
+     * @default vattjom
+     */
+    color?: 'mono' | 'vattjom';
+    /** If the card should be clickable, will apply hover style
+     * @default false;
+     */
+    useHoverEffect?: boolean;
+    /** Make the card linkable
+     */
+    href?: string;
+}
+export interface MetaCardProps extends Omit<React.ComponentPropsWithRef<'div'>, 'color'>, IMetaCardProps {
+}
+export declare const MetaCard: React.ForwardRefExoticComponent<Omit<MetaCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface IMetaCardBodyProps extends DefaultProps {
+    /** React node */
+    children?: React.ReactNode;
+}
+export interface MetaCardBodyProps extends React.ComponentPropsWithRef<'div'>, IMetaCardBodyProps {
+}
+export declare const MetaCardBody: React.ForwardRefExoticComponent<Omit<MetaCardBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface IMetaCardHeaderProps extends DefaultProps {
+    /** React node */
+    children?: React.ReactNode;
+}
+export interface MetaCardHeaderProps extends React.ComponentPropsWithRef<'div'>, IMetaCardHeaderProps {
+}
+export declare const MetaCardHeader: React.ForwardRefExoticComponent<Omit<MetaCardHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface IMetaCardTextProps extends DefaultProps {
+    /** React node */
+    children?: React.ReactNode;
+}
+export interface MetaCardTextProps extends React.ComponentPropsWithRef<'div'>, IMetaCardTextProps {
+}
+export declare const MetaCardText: React.ForwardRefExoticComponent<Omit<MetaCardTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default MetaCard;

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

@@ -0,0 +1,4 @@
+import { CardProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../src/card").CardProps>;
+export default _default;
+export declare const Template: (args: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/card/stories/meta-card.stories.d.ts

@@ -0,0 +1,4 @@
+import { MetaCardProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../src/meta-card").MetaCardProps>;
+export default _default;
+export declare const Template: (args: MetaCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/chip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src';
+export type * from './src';

package/dist/types/chip/src/chip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ChipProps extends React.ComponentPropsWithRef<'button'> {
+    strong?: boolean;
+    inverted?: boolean;
+    rounded?: boolean;
+}
+export declare const Chip: React.ForwardRefExoticComponent<Omit<ChipProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/chip/src/index.d.ts

@@ -0,0 +1,4 @@
+import { Chip, ChipProps } from './chip';
+export { Chip };
+export type { ChipProps };
+export default Chip;

package/dist/types/chip/stories/chip.stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChipProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, Omit<ChipProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default _default;
+export declare const Template: {
+    (args: ChipProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const AddAndRemove: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

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

@@ -147,11 +147,6 @@ export declare const Accordion: () => {
             '.sk-disclosure-body': {
                 '@apply overflow-visible animate-reset-overflow': {};
             };
-            '&[data-variant="default"]': {
-                '.sk-disclosure-title': {
-                    '@apply text-vattjom-text-primary': {};
-                };
-            };
         };
     };
     '.sk-accordion': {

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

@@ -29,6 +29,16 @@ export declare const ProgressStepper: () => {
                 '@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-[3.2rem] w-[3.2rem] min-h-[2.4rem] max-h-[3.2rem] min-w-[2.4rem] max-w-[3.2rem]': {};
+                    '@apply text-label-small': {};
+                };
+                '&&-md': {
+                    '@apply h-[4rem] w-[4rem] min-h-[3.2rem] max-h-[4rem] min-w-[3.2rem] max-w-[4rem]': {};
+                };
             };
             '&[data-progress="current"]': {
                 '@apply font-bold': {};

package/dist/types/cookie-consent/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src';
+export type * from './src';

package/dist/types/cookie-consent/src/cookie-consent.d.ts

@@ -0,0 +1,32 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import { CookieSetOptions } from 'universal-cookie';
+import React from 'react';
+export declare const defaultCookieConsentName = "SKCookieConsent";
+export interface ConsentCookie {
+    optional: boolean;
+    displayName: string;
+    description: string;
+    cookieName: string;
+}
+export interface CheckableConsentCookie extends ConsentCookie {
+    isChecked: boolean;
+}
+export declare enum ConsentType {
+    Necessary = "Necessary",
+    All = "All",
+    Custom = "Custom"
+}
+export declare function getConsent(): string[];
+export declare function resetConsent(): void;
+export declare function getCheckableCookies(cookies: ConsentCookie[]): CheckableConsentCookie[];
+export interface CookieConsentProps extends DefaultProps, Omit<React.ComponentPropsWithRef<'div'>, 'title'> {
+    isOpen?: boolean;
+    onConsent: (cookies: ConsentCookie[]) => void;
+    cookies: ConsentCookie[];
+    title: string;
+    body: React.ReactNode;
+    resetConsentOnInit: boolean;
+    options?: CookieSetOptions;
+}
+export declare const CookieConsent: React.FC<CookieConsentProps>;
+export default CookieConsent;

package/dist/types/cookie-consent/src/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ConsentType, CookieConsent, CookieConsentProps, getCheckableCookies, getConsent, resetConsent } from './cookie-consent';
+declare const CookieConsentUtils: {
+    defaultCookieConsentName: string;
+    getConsent: typeof getConsent;
+    resetConsent: typeof resetConsent;
+    getCheckableCookies: typeof getCheckableCookies;
+    ConsentType: typeof ConsentType;
+};
+export { CookieConsent, CookieConsentUtils };
+export type { CookieConsentProps };
+declare const _default: {
+    CookieConsent: import("react").FC<CookieConsentProps>;
+};
+export default _default;

package/dist/types/cookie-consent/stories/cookie-consent.stories.d.ts

@@ -0,0 +1,7 @@
+import { CookieConsentProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, CookieConsentProps>;
+export default _default;
+export declare const Template: {
+    (args: CookieConsentProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

package/dist/types/core/src/aria-plugin.d.ts

@@ -0,0 +1,4 @@
+export declare const AriaAttributes: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/dist/types/core/src/base.d.ts

@@ -0,0 +1,53 @@
+declare const _base: {
+    html: {
+        '@apply text-base antialiased': {};
+        fontSize: string;
+        textRendering: string;
+        touchAction: string;
+    };
+    body: {
+        '@apply text-base bg-background-content': {};
+        '@apply text-body': {};
+        position: string;
+        minHeight: string;
+        fontFeatureSettings: string;
+    };
+    '*': {
+        '@apply focus-visible:ring-ring': {};
+        '@apply focus-visible:ring-offset-background-content': {};
+        '@apply focus-visible:outline-0': {};
+    };
+    small: {
+        '@apply text-small': {};
+    };
+    a: {
+        '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {};
+    };
+    h1: {
+        '@apply text-h1-sm md:text-h1-md xl:text-h1-lg': {};
+        '@apply mb-md': {};
+    };
+    h2: {
+        '@apply text-h2-sm md:text-h2-md xl:text-h2-lg': {};
+    };
+    h3: {
+        '@apply text-h3-sm md:text-h3-md xl:text-h3-lg': {};
+    };
+    'h4,h5,h6': {
+        '@apply text-h4-sm md:text-h4-md xl:text-h4-lg': {};
+    };
+    label: {
+        '@apply text-label-medium': {};
+    };
+    p: {
+        '@apply my-4': {};
+    };
+    '.text-content': {
+        '@apply max-w-[80rem]': {};
+        p: {
+            '@apply mt-sm text-base': {};
+        };
+    };
+};
+declare const base: typeof _base;
+export { base };