@fristil/designsystem 0.2.0

package/dist/react.d.ts

@@ -0,0 +1,207 @@
+import { type FieldOptions } from "./components/ramme/field/field-core.js";
+import { setAttributes } from "./dom.js";
+/**
+ * Samme API som `fs`, men med `className` og `htmlFor`.
+ *
+ * Resten av systemet returnerer `class` og `for`, slik attributtene faktisk
+ * heter i HTML. React godtar dem, og de havner riktig i DOM-en, men
+ * utviklingsbygget skriver «Invalid DOM property `class`. Did you mean
+ * `className`?» i konsollen for hvert element. Med et helt felt blir det to
+ * advarsler per felt, og det er ikke en utvikleropplevelse vi kan by på.
+ *
+ * ```ts
+ * import { fs } from "@fristil/designsystem/react"
+ *
+ * <button {...fs.button({ variant: "secondary" })}>Lagre utkast</button>
+ * ```
+ *
+ * Kallstedene er identiske med resten av systemet; bare importstien er en
+ * annen. Dette er ren omdøping av to nøkler, så pakken får ingen
+ * avhengighet til React av det.
+ *
+ * Vue, Svelte, Solid og Preact tar `class` og `for` som de er. Der bruker du
+ * `@fristil/designsystem` direkte.
+ */
+/** Gir nøklene navnene React forventer. */
+export type ReactAttributes<T> = {
+    [K in keyof T as K extends "class" ? "className" : K extends "for" ? "htmlFor" : K]: T[K];
+};
+export declare function toReactAttributes<T extends Record<string, unknown>>(attributes: T): ReactAttributes<T>;
+export declare const fs: {
+    readonly accordion: ((options?: import("./index.js").AccordionOptions | undefined) => ReactAttributes<import("./index.js").AccordionAttributes>) & (({ variant }?: import("./index.js").AccordionOptions) => import("./index.js").AccordionAttributes) & {
+        content: "fs-accordion__content";
+        variants: readonly ["default", "plain"];
+        isVariant: (value: string) => value is "default" | "plain";
+    };
+    readonly alert: ((options?: import("./index.js").AlertOptions | undefined) => ReactAttributes<import("./index.js").AlertAttributes>) & (({ color }?: import("./index.js").AlertOptions) => import("./index.js").AlertAttributes) & {
+        title: "fs-alert__title";
+        colors: readonly ["info", "success", "warning", "danger"];
+        isColor: (value: string) => value is "warning" | "info" | "danger" | "success";
+    };
+    readonly avatar: ((options?: import("./index.js").AvatarOptions | undefined) => ReactAttributes<import("./index.js").AvatarAttributes>) & (({ size, variant, }?: import("./index.js").AvatarOptions) => import("./index.js").AvatarAttributes) & {
+        stack: "fs-avatar-stack";
+        sizes: readonly ["small", "medium", "large"];
+        isSize: (value: string) => value is "small" | "medium" | "large";
+        variants: readonly ["circle", "square"];
+        isVariant: (value: string) => value is "circle" | "square";
+    };
+    readonly badge: ((options?: import("./index.js").BadgeOptions | undefined) => ReactAttributes<import("./index.js").BadgeAttributes>) & (({ color }?: import("./index.js").BadgeOptions) => import("./index.js").BadgeAttributes) & {
+        colors: readonly ["info", "success", "warning", "danger", "neutral"];
+        isColor: (value: string) => value is "warning" | "info" | "danger" | "success" | "neutral";
+    };
+    readonly breadcrumbs: ((options?: unknown) => ReactAttributes<import("./index.js").BreadcrumbsAttributes>) & (() => import("./index.js").BreadcrumbsAttributes);
+    readonly button: ((options?: import("./index.js").ButtonOptions | undefined) => ReactAttributes<import("./index.js").ButtonAttributes>) & (({ variant }?: import("./index.js").ButtonOptions) => import("./index.js").ButtonAttributes) & {
+        variants: readonly ["primary", "secondary", "ghost", "danger"];
+        isVariant: (value: string) => value is "danger" | "primary" | "secondary" | "ghost";
+    };
+    readonly card: ((options?: import("./index.js").CardOptions | undefined) => ReactAttributes<import("./index.js").CardAttributes>) & (({ variant, interactive }?: import("./index.js").CardOptions) => import("./index.js").CardAttributes) & {
+        title: "fs-card__title";
+        variants: readonly ["outline", "filled"];
+        isVariant: (value: string) => value is "outline" | "filled";
+    };
+    readonly checkbox: ((options?: import("./index.js").CheckboxOptions | undefined) => ReactAttributes<import("./index.js").CheckboxAttributes>) & (({ state }?: import("./index.js").CheckboxOptions) => import("./index.js").CheckboxAttributes) & {
+        row: "fs-checkbox-row";
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "success" | "invalid";
+    };
+    readonly dialog: ((options?: unknown) => ReactAttributes<import("./index.js").DialogAttributes>) & (() => import("./index.js").DialogAttributes) & {
+        title: "fs-dialog__title";
+        body: "fs-dialog__body";
+        footer: "fs-dialog__footer";
+    };
+    readonly divider: ((options?: import("./index.js").DividerOptions | undefined) => ReactAttributes<import("./index.js").DividerAttributes>) & (({ variant }?: import("./index.js").DividerOptions) => import("./index.js").DividerAttributes) & {
+        variants: readonly ["default", "subtle", "strong"];
+        isVariant: (value: string) => value is "default" | "subtle" | "strong";
+    };
+    readonly errorText: ((options?: import("./index.js").ErrorTextOptions | undefined) => ReactAttributes<import("./index.js").ErrorTextAttributes>) & (({ variant }?: import("./index.js").ErrorTextOptions) => import("./index.js").ErrorTextAttributes) & {
+        variants: readonly ["error", "warning"];
+        isVariant: (value: string) => value is "error" | "warning";
+    };
+    readonly fieldset: ((options?: import("./index.js").FieldsetOptions | undefined) => ReactAttributes<import("./index.js").FieldsetAttributes>) & (({ state, disabled }?: import("./index.js").FieldsetOptions) => import("./index.js").FieldsetAttributes) & {
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "success" | "invalid";
+    };
+    readonly heading: ((options?: import("./index.js").HeadingOptions | undefined) => ReactAttributes<import("./index.js").HeadingAttributes>) & (({ size }?: import("./index.js").HeadingOptions) => import("./index.js").HeadingAttributes) & {
+        sizes: readonly ["xs", "s", "m", "l", "xl", "mega"];
+        isSize: (value: string) => value is "l" | "xs" | "s" | "m" | "xl" | "mega";
+    };
+    readonly fileUpload: ((options?: import("./index.js").FileUploadOptions | undefined) => ReactAttributes<import("./index.js").FileUploadAttributes>) & (({ state, multiple, accept, }?: import("./index.js").FileUploadOptions) => import("./index.js").FileUploadAttributes) & {
+        list: "fs-file-upload-list";
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "success" | "invalid";
+    };
+    readonly helpText: ((options?: import("./index.js").HelpTextOptions | undefined) => ReactAttributes<import("./index.js").HelpTextAttributes>) & (({ variant }?: import("./index.js").HelpTextOptions) => import("./index.js").HelpTextAttributes) & {
+        variants: readonly ["muted", "default", "success", "warning"];
+        isVariant: (value: string) => value is "default" | "warning" | "success" | "muted";
+    };
+    readonly input: ((options?: import("./index.js").InputOptions | undefined) => ReactAttributes<import("./index.js").InputAttributes>) & (({ type, state }?: import("./index.js").InputOptions) => import("./index.js").InputAttributes) & {
+        types: readonly ["text", "password", "email", "number", "date", "datetime-local", "week", "month", "tel", "url", "search", "time"];
+        isType: (value: string) => value is "number" | "date" | "search" | "url" | "text" | "password" | "email" | "datetime-local" | "week" | "month" | "tel" | "time";
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "success" | "invalid";
+    };
+    readonly label: ((options?: import("./index.js").LabelOptions | undefined) => ReactAttributes<import("./index.js").LabelAttributes>) & (({ required, optional, disabled }?: import("./index.js").LabelOptions) => import("./index.js").LabelAttributes) & {
+        markers: readonly ["symbol", "text"];
+        isMarker: (value: string) => value is "symbol" | "text";
+    };
+    readonly legend: ((options?: import("./index.js").LegendOptions | undefined) => ReactAttributes<import("./index.js").LegendAttributes>) & (({ required, optional, disabled }?: import("./index.js").LegendOptions) => import("./index.js").LegendAttributes) & {
+        markers: readonly ["symbol", "text"];
+        isMarker: (value: string) => value is "symbol" | "text";
+    };
+    readonly link: ((options?: import("./index.js").LinkOptions | undefined) => ReactAttributes<import("./index.js").LinkAttributes>) & (({ disabled }?: import("./index.js").LinkOptions) => import("./index.js").LinkAttributes);
+    readonly list: ((options?: import("./index.js").ListOptions | undefined) => ReactAttributes<import("./index.js").ListAttributes>) & (({ variant }?: import("./index.js").ListOptions) => import("./index.js").ListAttributes) & {
+        variants: readonly ["default", "plain", "divided"];
+        isVariant: (value: string) => value is "default" | "plain" | "divided";
+    };
+    readonly pagination: ((options?: unknown) => ReactAttributes<import("./index.js").PaginationAttributes>) & (() => import("./index.js").PaginationAttributes) & {
+        gap: "fs-pagination__gap";
+    };
+    readonly paragraph: ((options?: import("./index.js").ParagraphOptions | undefined) => ReactAttributes<import("./index.js").ParagraphAttributes>) & (({ size, variant, }?: import("./index.js").ParagraphOptions) => import("./index.js").ParagraphAttributes) & {
+        sizes: readonly ["small", "medium", "large"];
+        isSize: (value: string) => value is "small" | "medium" | "large";
+        variants: readonly ["default", "lead"];
+        isVariant: (value: string) => value is "default" | "lead";
+    };
+    readonly radio: ((options?: import("./index.js").RadioOptions | undefined) => ReactAttributes<import("./index.js").RadioAttributes>) & (({ state }?: import("./index.js").RadioOptions) => import("./index.js").RadioAttributes) & {
+        row: "fs-radio-row";
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "success" | "invalid";
+    };
+    readonly search: ((options?: import("./index.js").SearchOptions | undefined) => ReactAttributes<import("./index.js").SearchAttributes>) & (({ state }?: import("./index.js").SearchOptions) => import("./index.js").SearchAttributes) & {
+        row: "fs-search-row";
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "success" | "invalid";
+    };
+    readonly select: ((options?: import("./index.js").SelectOptions | undefined) => ReactAttributes<import("./index.js").SelectAttributes>) & (({ state }?: import("./index.js").SelectOptions) => import("./index.js").SelectAttributes) & {
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "success" | "invalid";
+    };
+    readonly skeleton: ((options?: import("./index.js").SkeletonOptions | undefined) => ReactAttributes<import("./index.js").SkeletonAttributes>) & (({ variant }?: import("./index.js").SkeletonOptions) => import("./index.js").SkeletonAttributes) & {
+        variants: readonly ["block", "text", "circle"];
+        isVariant: (value: string) => value is "text" | "circle" | "block";
+    };
+    readonly skipLink: ((options?: unknown) => ReactAttributes<import("./index.js").SkipLinkAttributes>) & (() => import("./index.js").SkipLinkAttributes);
+    readonly spinner: ((options?: import("./index.js").SpinnerOptions | undefined) => ReactAttributes<import("./index.js").SpinnerAttributes>) & (({ size, label }?: import("./index.js").SpinnerOptions) => import("./index.js").SpinnerAttributes) & {
+        sizes: readonly ["small", "medium", "large"];
+        isSize: (value: string) => value is "small" | "medium" | "large";
+    };
+    readonly srOnly: ((options?: unknown) => ReactAttributes<import("./index.js").SrOnlyAttributes>) & (() => import("./index.js").SrOnlyAttributes);
+    readonly switch: ((options?: import("./index.js").SwitchOptions | undefined) => ReactAttributes<import("./index.js").SwitchAttributes>) & (({ disabled }?: import("./index.js").SwitchOptions) => import("./index.js").SwitchAttributes) & {
+        row: "fs-switch-row";
+    };
+    readonly toggleGroup: ((options?: unknown) => ReactAttributes<import("./index.js").ToggleGroupAttributes>) & (() => import("./index.js").ToggleGroupAttributes) & {
+        option: "fs-toggle-group__option";
+    };
+    readonly tooltip: ((options?: unknown) => ReactAttributes<import("./index.js").TooltipAttributes>) & (() => import("./index.js").TooltipAttributes) & {
+        bubble: "fs-tooltip__bubble";
+    };
+    readonly table: ((options?: import("./index.js").TableOptions | undefined) => ReactAttributes<import("./index.js").TableAttributes>) & (({ variant, hoverable }?: import("./index.js").TableOptions) => import("./index.js").TableAttributes) & {
+        scroll: "fs-table-scroll";
+        variants: readonly ["default", "striped"];
+        isVariant: (value: string) => value is "default" | "striped";
+    };
+    readonly tag: ((options?: import("./index.js").TagOptions | undefined) => ReactAttributes<import("./index.js").TagAttributes>) & (({ variant, selectable }?: import("./index.js").TagOptions) => import("./index.js").TagAttributes) & {
+        variants: readonly ["outline", "filled"];
+        isVariant: (value: string) => value is "outline" | "filled";
+    };
+    readonly textarea: ((options?: import("./index.js").TextareaOptions | undefined) => ReactAttributes<import("./index.js").TextareaAttributes>) & (({ state }?: import("./index.js").TextareaOptions) => import("./index.js").TextareaAttributes) & {
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "success" | "invalid";
+    };
+    /**
+     * Kobler et helt felt, med `className` og `htmlFor` på ledeteksten.
+     *
+     * `control`, `help` og `error` har ingen nøkler som må døpes om, og er
+     * derfor like i begge inngangene.
+     */
+    readonly field: (options?: FieldOptions) => {
+        label: ReactAttributes<{
+            class: "fs-label";
+            for: string;
+            "data-required"?: import("./index.js").RequiredMarker;
+            "data-optional"?: "";
+            "aria-disabled"?: "true";
+        }>;
+        control: {
+            id: string;
+            "aria-describedby"?: string;
+            "aria-invalid"?: "true";
+            "data-state"?: "invalid";
+            disabled?: true;
+        };
+        help: {
+            id: string;
+        };
+        error: {
+            id: string;
+            hidden?: true;
+        };
+        state: import("./index.js").FieldState;
+    };
+    readonly setAttributes: typeof setAttributes;
+    readonly states: readonly ["default", "invalid", "success"];
+    readonly isState: (value: string) => value is "default" | "success" | "invalid";
+    readonly markers: readonly ["symbol", "text"];
+    readonly isMarker: (value: string) => value is "symbol" | "text";
+};
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAwCA,OAAO,EAEL,KAAK,YAAY,EAClB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,2CAA2C;AAC3C,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,OAAO,GAC9B,WAAW,GACX,CAAC,SAAS,KAAK,GACb,SAAS,GACT,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACf,CAAA;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,UAAU,EAAE,CAAC,GACZ,eAAe,CAAC,CAAC,CAAC,CAOpB;AAgBD,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqCb;;;;;OAKG;+BACc,YAAY;;;;;;;;;;8BArHjB,CAAC;0BACR,CAAA;wBAAyB,CAAC;oBAAwB,CAAC;;;;;;;kBACF,CAAC;;;;;;;;;CA8H/C,CAAA"}

package/dist/react.js

@@ -0,0 +1,109 @@
+import { accordion } from "./components/css/accordion/accordion.js";
+import { alert } from "./components/css/alert/alert.js";
+import { avatar } from "./components/css/avatar/avatar.js";
+import { badge } from "./components/css/badge/badge.js";
+import { breadcrumbs } from "./components/css/breadcrumbs/breadcrumbs.js";
+import { button } from "./components/css/button/button.js";
+import { card } from "./components/css/card/card.js";
+import { checkbox } from "./components/css/checkbox/checkbox.js";
+import { dialog } from "./components/css/dialog/dialog.js";
+import { divider } from "./components/css/divider/divider.js";
+import { errorText } from "./components/css/error-text/error-text.js";
+import { fieldset, legend } from "./components/css/fieldset/fieldset.js";
+import { fileUpload } from "./components/css/file-upload/file-upload.js";
+import { heading } from "./components/css/heading/heading.js";
+import { helpText } from "./components/css/help-text/help-text.js";
+import { input } from "./components/css/input/input.js";
+import { label } from "./components/css/label/label.js";
+import { link } from "./components/css/link/link.js";
+import { list } from "./components/css/list/list.js";
+import { pagination } from "./components/css/pagination/pagination.js";
+import { paragraph } from "./components/css/paragraph/paragraph.js";
+import { radio } from "./components/css/radio/radio.js";
+import { search } from "./components/css/search/search.js";
+import { select } from "./components/css/select/select.js";
+import { fieldStates, isFieldState, isRequiredMarker, requiredMarkers, } from "./components/css/shared.js";
+import { skeleton } from "./components/css/skeleton/skeleton.js";
+import { skipLink } from "./components/css/skip-link/skip-link.js";
+import { spinner } from "./components/css/spinner/spinner.js";
+import { srOnly } from "./components/css/sr-only/sr-only.js";
+import { switchControl } from "./components/css/switch/switch.js";
+import { table } from "./components/css/table/table.js";
+import { tag } from "./components/css/tag/tag.js";
+import { textarea } from "./components/css/textarea/textarea.js";
+import { toggleGroup } from "./components/css/toggle-group/toggle-group.js";
+import { tooltip } from "./components/css/tooltip/tooltip.js";
+import { computeFieldAttributes, } from "./components/ramme/field/field-core.js";
+import { setAttributes } from "./dom.js";
+export function toReactAttributes(attributes) {
+    const result = {};
+    for (const [name, value] of Object.entries(attributes)) {
+        result[name === "class" ? "className" : name === "for" ? "htmlFor" : name] =
+            value;
+    }
+    return result;
+}
+/**
+ * Pakker inn en byggefunksjon så returverdien får React-navnene.
+ *
+ * Signaturen er skrevet som en snitt-type for at TypeScript skal kunne utlede
+ * både valgtypen og de ekstra feltene som henger på funksjonen, altså
+ * `variants`, `isVariant` og de andre, i samme slengen.
+ */
+function forReact(fn) {
+    const wrapped = (options) => toReactAttributes(fn(options));
+    return Object.assign(wrapped, fn);
+}
+export const fs = {
+    accordion: forReact(accordion),
+    alert: forReact(alert),
+    avatar: forReact(avatar),
+    badge: forReact(badge),
+    breadcrumbs: forReact(breadcrumbs),
+    button: forReact(button),
+    card: forReact(card),
+    checkbox: forReact(checkbox),
+    dialog: forReact(dialog),
+    divider: forReact(divider),
+    errorText: forReact(errorText),
+    fieldset: forReact(fieldset),
+    heading: forReact(heading),
+    fileUpload: forReact(fileUpload),
+    helpText: forReact(helpText),
+    input: forReact(input),
+    label: forReact(label),
+    legend: forReact(legend),
+    link: forReact(link),
+    list: forReact(list),
+    pagination: forReact(pagination),
+    paragraph: forReact(paragraph),
+    radio: forReact(radio),
+    search: forReact(search),
+    select: forReact(select),
+    skeleton: forReact(skeleton),
+    skipLink: forReact(skipLink),
+    spinner: forReact(spinner),
+    srOnly: forReact(srOnly),
+    switch: forReact(switchControl),
+    toggleGroup: forReact(toggleGroup),
+    tooltip: forReact(tooltip),
+    table: forReact(table),
+    tag: forReact(tag),
+    textarea: forReact(textarea),
+    /**
+     * Kobler et helt felt, med `className` og `htmlFor` på ledeteksten.
+     *
+     * `control`, `help` og `error` har ingen nøkler som må døpes om, og er
+     * derfor like i begge inngangene.
+     */
+    field: (options = {}) => {
+        const field = computeFieldAttributes(options);
+        return { ...field, label: toReactAttributes(field.label) };
+    },
+    setAttributes,
+    states: fieldStates,
+    isState: isFieldState,
+    markers: requiredMarkers,
+    isMarker: isRequiredMarker,
+};
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAA;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAA;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,6CAA6C,CAAA;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAA;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAA;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAA;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAA;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EACL,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,eAAe,GAChB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAA;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAC7D,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAkCxC,MAAM,UAAU,iBAAiB,CAC/B,UAAa;IAEb,MAAM,MAAM,GAA4B,EAAE,CAAA;IAC1C,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;QACvD,MAAM,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;YACxE,KAAK,CAAA;IACT,CAAC;IACD,OAAO,MAA4B,CAAA;AACrC,CAAC;AAED;;;;;;GAMG;AACH,SAAS,QAAQ,CACf,EAA2C;IAE3C,MAAM,OAAO,GAAG,CAAC,OAAiB,EAAE,EAAE,CAAC,iBAAiB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACrE,OAAO,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AACnC,CAAC;AAED,MAAM,CAAC,MAAM,EAAE,GAAG;IAChB,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC9B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;IACtB,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;IACxB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;IACtB,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC;IAClC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;IACxB,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC5B,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;IACxB,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC1B,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC9B,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC5B,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC1B,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC;IAChC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC5B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;IACtB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;IACtB,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;IACxB,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC;IAChC,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC9B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;IACtB,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;IACxB,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;IACxB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC5B,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC5B,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC1B,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;IACxB,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC;IAC/B,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC;IAClC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC1B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;IACtB,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAE5B;;;;;OAKG;IACH,KAAK,EAAE,CAAC,UAAwB,EAAE,EAAE,EAAE;QACpC,MAAM,KAAK,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAA;QAC7C,OAAO,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA;IAC5D,CAAC;IAED,aAAa;IAEb,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,YAAY;IACrB,OAAO,EAAE,eAAe;IACxB,QAAQ,EAAE,gBAAgB;CAClB,CAAA"}

package/dist/tailwind/preset.d.ts

@@ -0,0 +1,120 @@
+export declare const fristilPreset: {
+    theme: {
+        screens: {
+            readonly sm: "640px";
+            readonly md: "768px";
+            readonly lg: "1024px";
+            readonly xl: "1280px";
+            readonly "2xl": "1536px";
+        };
+        colors: {
+            transparent: string;
+            current: string;
+            page: {
+                bg: string;
+                fg: string;
+            };
+            interactive: {
+                DEFAULT: string;
+                bg: string;
+                fg: string;
+            };
+            danger: {
+                DEFAULT: string;
+                bg: string;
+            };
+            warning: {
+                DEFAULT: string;
+                bg: string;
+            };
+            success: {
+                DEFAULT: string;
+                bg: string;
+            };
+            disabled: {
+                DEFAULT: string;
+                bg: string;
+            };
+            neutral: {
+                DEFAULT: string;
+                bg: string;
+            };
+            divider: {
+                DEFAULT: string;
+                strong: string;
+            };
+            palette: {
+                burgundy: {
+                    5: string;
+                    10: string;
+                    30: string;
+                    50: string;
+                    70: string;
+                    100: string;
+                };
+                forest: {
+                    5: string;
+                    10: string;
+                    30: string;
+                    50: string;
+                    70: string;
+                    100: string;
+                };
+                ochre: {
+                    5: string;
+                    10: string;
+                    30: string;
+                    50: string;
+                    70: string;
+                    100: string;
+                };
+                denim: {
+                    5: string;
+                    10: string;
+                    30: string;
+                    50: string;
+                    70: string;
+                    100: string;
+                };
+                azure: {
+                    10: string;
+                    30: string;
+                    70: string;
+                    100: string;
+                };
+                graphite: {
+                    0: string;
+                    5: string;
+                    10: string;
+                    30: string;
+                    50: string;
+                    70: string;
+                    100: string;
+                };
+            };
+        };
+        fontSize: {
+            xxs: string;
+            xs: string;
+            s: string;
+            m: string;
+            l: string;
+            xl: string;
+            xxl: string;
+            mega: string;
+        };
+        extend: {
+            maxWidth: {
+                readonly xs: "100%";
+                readonly sm: "576px";
+                readonly md: "960px";
+                readonly lg: "1152px";
+                readonly xl: "1536px";
+                readonly aside: "384px";
+                readonly asideNarrow: "288px";
+                readonly wideContent: "768px";
+            };
+        };
+    };
+};
+//# sourceMappingURL=preset.d.ts.map

package/dist/tailwind/preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GC,CAAA"}

package/dist/tailwind/preset.js

@@ -0,0 +1,107 @@
+import { Breakpoints, Containers } from "../tokens/tokens.js";
+const v = (token) => `var(${token})`;
+export const fristilPreset = {
+    theme: {
+        screens: Breakpoints,
+        colors: {
+            transparent: "transparent",
+            current: "currentColor",
+            page: {
+                bg: v("--semantic-page-background"),
+                fg: v("--semantic-page-foreground"),
+            },
+            interactive: {
+                DEFAULT: v("--semantic-interactive-main"),
+                bg: v("--semantic-interactive-background"),
+                fg: v("--semantic-interactive-foreground"),
+            },
+            danger: {
+                DEFAULT: v("--semantic-danger-foreground"),
+                bg: v("--semantic-danger-background"),
+            },
+            warning: {
+                DEFAULT: v("--semantic-warning-foreground"),
+                bg: v("--semantic-warning-background"),
+            },
+            success: {
+                DEFAULT: v("--semantic-success-foreground"),
+                bg: v("--semantic-success-background"),
+            },
+            disabled: {
+                DEFAULT: v("--semantic-disabled-foreground"),
+                bg: v("--semantic-disabled-background"),
+            },
+            neutral: {
+                DEFAULT: v("--semantic-neutral-foreground"),
+                bg: v("--semantic-neutral-background"),
+            },
+            divider: {
+                DEFAULT: v("--semantic-divider-30"),
+                strong: v("--semantic-divider-100"),
+            },
+            palette: {
+                burgundy: {
+                    5: v("--palette-burgundy-5"),
+                    10: v("--palette-burgundy-10"),
+                    30: v("--palette-burgundy-30"),
+                    50: v("--palette-burgundy-50"),
+                    70: v("--palette-burgundy-70"),
+                    100: v("--palette-burgundy-100"),
+                },
+                forest: {
+                    5: v("--palette-forest-5"),
+                    10: v("--palette-forest-10"),
+                    30: v("--palette-forest-30"),
+                    50: v("--palette-forest-50"),
+                    70: v("--palette-forest-70"),
+                    100: v("--palette-forest-100"),
+                },
+                ochre: {
+                    5: v("--palette-ochre-5"),
+                    10: v("--palette-ochre-10"),
+                    30: v("--palette-ochre-30"),
+                    50: v("--palette-ochre-50"),
+                    70: v("--palette-ochre-70"),
+                    100: v("--palette-ochre-100"),
+                },
+                denim: {
+                    5: v("--palette-denim-5"),
+                    10: v("--palette-denim-10"),
+                    30: v("--palette-denim-30"),
+                    50: v("--palette-denim-50"),
+                    70: v("--palette-denim-70"),
+                    100: v("--palette-denim-100"),
+                },
+                azure: {
+                    10: v("--palette-azure-10"),
+                    30: v("--palette-azure-30"),
+                    70: v("--palette-azure-70"),
+                    100: v("--palette-azure-100"),
+                },
+                graphite: {
+                    0: v("--palette-graphite-0"),
+                    5: v("--palette-graphite-5"),
+                    10: v("--palette-graphite-10"),
+                    30: v("--palette-graphite-30"),
+                    50: v("--palette-graphite-50"),
+                    70: v("--palette-graphite-70"),
+                    100: v("--palette-graphite-100"),
+                },
+            },
+        },
+        fontSize: {
+            xxs: v("--font-size-xxs"),
+            xs: v("--font-size-xs"),
+            s: v("--font-size-s"),
+            m: v("--font-size-m"),
+            l: v("--font-size-l"),
+            xl: v("--font-size-xl"),
+            xxl: v("--font-size-xxl"),
+            mega: v("--font-size-mega"),
+        },
+        extend: {
+            maxWidth: Containers,
+        },
+    },
+};
+//# sourceMappingURL=preset.js.map

package/dist/tailwind/preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.js","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"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"}

package/dist/takeover.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Regnestykket bak `fristil overta <komponent>`.
+ *
+ * Kommandoen kopierer kildekoden til én komponent inn i prosjektet ditt.
+ * Tilpasning gjennom `@layer`, `--fs-*`-variabler og `::part()` dekker
+ * utseendet, men ikke «jeg vil at denne komponenten skal oppføre seg
+ * annerledes». Da er alternativet enten å leve med det eller å skrive
+ * komponenten på nytt fra bunnen. Denne kommandoen er veien imellom.
+ *
+ * Fila her gjør ingenting med filsystemet, bare med tekst, slik at
+ * omskrivingen kan måles i en test. `cli.ts` leser og skriver filene.
+ *
+ * Det som må skrives om er henvisningene ut av mappa. En komponent peker på
+ * naboene sine med relative stier, og de stiene finnes ikke lenger når mappa
+ * står i et annet prosjekt. `../shared.js` blir til
+ * `@fristil/designsystem/shared`, som fortsatt virker, og som gjør det synlig
+ * hva kopien fremdeles henter fra pakken.
+ */
+/** En fil i pakken, slik `cli.ts` har lest den. */
+export type SourceFile = {
+    /** Stien i pakken, som «src/components/css/button/button.ts». */
+    path: string;
+    content: string;
+};
+export type PackageExports = Record<string, string | {
+    import?: string;
+    types?: string;
+}>;
+export type PlannedFile = {
+    /** Filnavnet alene, som «button.ts». */
+    name: string;
+    content: string;
+    /** Henvisninger som ble skrevet om, til utskrift etterpå. */
+    rewrites: {
+        from: string;
+        to: string;
+    }[];
+};
+export type TakeoverPlan = {
+    files: PlannedFile[];
+    /** Pakker kopien trenger i prosjektet, som «lit». */
+    dependencies: string[];
+    /** Stilark kopien fortsatt henter fra pakken. */
+    keptImports: string[];
+    /**
+     * Inngangspunktene kopien tar over for.
+     *
+     * Kopien beholder klassenavnene, så importerer prosjektet fortsatt
+     * `@fristil/designsystem/button.css` i tillegg, finnes komponenten to
+     * ganger, og den ene vinner tilfeldig.
+     */
+    replacedEntries: string[];
+};
+/**
+ * Bygger oppslaget fra en fil i pakken til inngangspunktet som peker på den.
+ *
+ * `exports` peker på `dist` for JavaScript og på `src` for CSS. Begge føres
+ * tilbake til kilden, siden det er kilden som kopieres.
+ */
+export declare function buildEntryPoints(name: string, exports: PackageExports): Map<string, string>;
+/** Slår sammen en relativ sti med mappa den står i. */
+export declare function resolvePath(fromDirectory: string, relative: string): string;
+/**
+ * Skriver om henvisningene i én fil.
+ *
+ * Bare stier som peker ut av mappa røres. En nabo i samme mappe blir med i
+ * kopien, og skal fortsatt finnes der.
+ */
+export declare function rewriteReferences(file: SourceFile, entryPoints: Map<string, string>, 
+/** Stiene til filene som blir med i kopien, som de står i pakken. */
+ownFiles: Set<string>): PlannedFile;
+/**
+ * Setter sammen hele planen for én komponent.
+ *
+ * `files` er alle filene i komponentmappa, uten testene: de hører til
+ * pakkens eget oppsett og sier ingenting i et annet prosjekt.
+ */
+export declare function planTakeover(files: SourceFile[], entryPoints: Map<string, string>): TakeoverPlan;
+//# sourceMappingURL=takeover.d.ts.map