@tempoxyz/ds 0.2.5 → 0.3.0

package/dist/web/components/Tag.d.ts

@@ -1,171 +0,0 @@
-import { useRender } from '@base-ui/react/use-render';
-import type { ComponentPropsWithRef } from 'react';
-import type * as zyzz from 'zyzz';
-/**
- * A compact status or metadata label, rendered as a `span`. Pass `render`, such as
- * `<button type="button" />` or an `a` element, to make it interactive. Those tags keep the badge
- * look and add pointer, focus-visible and press feedback.
- *
- * - Keep the text to a word or two that names a status or attribute.
- * - Do not rely on `intent` color alone. The text or a leading icon must carry the meaning.
- * - Render a static tag for display. Reach for `render` only when the tag performs an action.
- *
- * @example
- * <Tag intent="positive">
- *   <Tag.Dot />
- *   Active
- * </Tag>
- *
- * @see {@link https://base-ui.com/react/utils/use-render | Base UI useRender}
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span | MDN span element}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html | WCAG 2.2 Contrast (Minimum)}
- */
-export declare function Tag(props: Tag.Props): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export declare namespace Tag {
-    type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.tag> & {
-        render?: useRender.RenderProp | undefined;
-    };
-    /** A 6px dot in the tag's text color, hidden from assistive technology. Place it before text. */
-    function Dot(props: Dot.Props): import("react").JSX.Element;
-    namespace Dot {
-        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.dot>;
-    }
-}
-declare namespace styles {
-    const dot: zyzz.style.ReturnType<"react">;
-    const tag: zyzz.variants.ReturnType<{
-        readonly base: {
-            readonly alignItems: "center";
-            readonly border: "1px solid !custom";
-            readonly borderColor: "transparent !custom";
-            readonly boxSizing: "border-box";
-            readonly columnGap: "6";
-            readonly display: "inline-flex";
-            readonly height: "24";
-            readonly paddingInline: "8";
-            readonly typography: "label.12";
-            readonly whiteSpace: "nowrap";
-            readonly selectors: {
-                readonly '& > svg': {
-                    readonly flexShrink: "0 !custom";
-                    readonly height: "12";
-                    readonly width: "12";
-                };
-                readonly '&:is(button, a)': {
-                    readonly cursor: "pointer";
-                    readonly outlineColor: "transparent !custom";
-                    readonly outlineOffset: "0";
-                    readonly outlineStyle: "solid !custom";
-                    readonly outlineWidth: "2";
-                    readonly textDecoration: "none !custom";
-                    readonly transitionDuration: "160";
-                    readonly transitionProperty: "opacity, outline-color, outline-offset, scale";
-                    readonly transitionTimingFunction: "snappy";
-                };
-                readonly '&:is(button, a):active': {
-                    readonly scale: "press";
-                };
-                readonly '&:is(button, a):focus-visible': {
-                    readonly outlineColor: "blue.700";
-                    readonly outlineOffset: "2";
-                };
-                readonly '&:is(button, a):hover': {
-                    readonly opacity: "0.8 !custom";
-                };
-                readonly '&:is(button):disabled': {
-                    readonly cursor: "default";
-                    readonly opacity: "disabled";
-                };
-            };
-            readonly '@media (prefers-reduced-motion: reduce)': {
-                readonly selectors: {
-                    readonly '&:is(button, a)': {
-                        readonly transitionProperty: "opacity, outline-color";
-                    };
-                    readonly '&:is(button, a):active': {
-                        readonly scale: "none !custom";
-                    };
-                };
-            };
-        };
-        readonly compoundVariants: readonly [{
-            readonly when: {
-                readonly variant: "outlined";
-            };
-            readonly style: {
-                readonly backgroundColor: "transparent !custom";
-                readonly borderColor: "currentColor !custom";
-            };
-        }, {
-            readonly when: {
-                readonly variant: "plain";
-            };
-            readonly style: {
-                readonly backgroundColor: "transparent !custom";
-                readonly paddingInline: "0";
-            };
-        }];
-        readonly defaultVariants: {
-            readonly intent: "neutral";
-            readonly shape: "pill";
-            readonly size: "medium";
-            readonly variant: "soft";
-        };
-        readonly variants: {
-            readonly intent: {
-                readonly accent: {
-                    readonly backgroundColor: "purple.100";
-                    readonly color: "purple.900";
-                };
-                readonly info: {
-                    readonly backgroundColor: "blue.100";
-                    readonly color: "blue.900";
-                };
-                readonly negative: {
-                    readonly backgroundColor: "red.100";
-                    readonly color: "red.900";
-                };
-                readonly neutral: {
-                    readonly backgroundColor: "grayAlpha.100";
-                    readonly color: "gray.900";
-                };
-                readonly positive: {
-                    readonly backgroundColor: "green.100";
-                    readonly color: "green.900";
-                };
-                readonly warning: {
-                    readonly backgroundColor: "amber.100";
-                    readonly color: "amber.900";
-                };
-            };
-            readonly shape: {
-                readonly pill: {
-                    readonly borderRadius: "full";
-                };
-                readonly rounded: {
-                    readonly borderRadius: "8";
-                };
-            };
-            readonly size: {
-                readonly large: {
-                    readonly height: "32";
-                    readonly paddingInline: "12";
-                    readonly typography: "label.14";
-                };
-                readonly medium: {};
-                readonly small: {
-                    readonly height: "20";
-                    readonly paddingInline: "6";
-                };
-            };
-            readonly variant: {
-                outlined: {};
-                plain: {};
-                soft: {};
-            };
-        };
-    }, "react">;
-}
-export {};
-//# sourceMappingURL=Tag.d.ts.map

package/dist/web/components/Tag.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/web/components/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,8FAYnC;AAED,yBAAiB,GAAG,CAAC;IACnB,KAAY,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,GAAG,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,GAAG,SAAS,CAAA;KAAE,CAAA;IAExF,iGAAiG;IACjG,SAAgB,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,+BAUnC;IAED,UAAiB,GAAG,CAAC;QACnB,KAAY,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,GAAG,CAAC,CAAA;KAC3F;CACF;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,GAAG,gCASf,CAAA;IAEM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAsEC,QAAQ;gBAAM,KAAK;gBAAM,IAAI;;;eAI7C,CAAA;CACF"}

package/dist/web/components/Tag.js

@@ -1,52 +0,0 @@
-
-import { Props as __zyzzProps, Recipe as __zyzzRecipe } from 'zyzz/runtime';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRender } from '@base-ui/react/use-render';
-import { style, variants } from '../zyzz.config.js';
-/**
- * A compact status or metadata label, rendered as a `span`. Pass `render`, such as
- * `<button type="button" />` or an `a` element, to make it interactive. Those tags keep the badge
- * look and add pointer, focus-visible and press feedback.
- *
- * - Keep the text to a word or two that names a status or attribute.
- * - Do not rely on `intent` color alone. The text or a leading icon must carry the meaning.
- * - Render a static tag for display. Reach for `render` only when the tag performs an action.
- *
- * @example
- * <Tag intent="positive">
- *   <Tag.Dot />
- *   Active
- * </Tag>
- *
- * @see {@link https://base-ui.com/react/utils/use-render | Base UI useRender}
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span | MDN span element}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html | WCAG 2.2 Contrast (Minimum)}
- */
-export function Tag(props) {
-    const { className, intent, ref, render, shape, size, variant, vars, ...attributes } = props;
-    return useRender({
-        defaultTagName: 'span',
-        props: {
-            ...attributes,
-            ...styles.tag({ className, intent, shape, size, style: props.style, variant, vars }),
-        },
-        ref,
-        render,
-    });
-}
-(function (Tag) {
-    /** A 6px dot in the tag's text color, hidden from assistive technology. Place it before text. */
-    function Dot(props) {
-        const { className, vars, ...attributes } = props;
-        return (_jsx("span", { "aria-hidden": "true", ...attributes, ...styles.dot({ className, style: props.style, vars }) }));
-    }
-    Tag.Dot = Dot;
-})(Tag || (Tag = {}));
-var styles;
-(function (styles) {
-    styles.dot = __zyzzProps.create({className:"z-tds_2f_web-tds_2f_web_2f_tag_2f_dot-bg-0 z-tds_2f_web-tds_2f_web_2f_tag_2f_dot-border-radius-1 z-tds_2f_web-tds_2f_web_2f_tag_2f_dot-flex-shrink-2 z-tds_2f_web-tds_2f_web_2f_tag_2f_dot-h-3 z-tds_2f_web-tds_2f_web_2f_tag_2f_dot-w-4"});
-    styles.tag = __zyzzRecipe.create({"axes":{"intent":["accent","info","negative","neutral","positive","warning"],"shape":["pill","rounded"],"size":["large","medium","small"],"variant":["outlined","plain","soft"]},"defaults":{"intent":"neutral","shape":"pill","size":"medium","variant":"soft"},"className":"z-tds_2f_web-tds_2f_web_2f_tag-align-items-0 z-tds_2f_web-tds_2f_web_2f_tag-border-1 z-tds_2f_web-tds_2f_web_2f_tag-border-color-2 z-tds_2f_web-tds_2f_web_2f_tag-box-sizing-3 z-tds_2f_web-tds_2f_web_2f_tag-column-gap-4 z-tds_2f_web-tds_2f_web_2f_tag-display-5 z-tds_2f_web-tds_2f_web_2f_tag-h-6 z-tds_2f_web-tds_2f_web_2f_tag-padding-inline-7 z-tds_2f_web-tds_2f_web_2f_tag-font-family-8 z-tds_2f_web-tds_2f_web_2f_tag-font-size-9 z-tds_2f_web-tds_2f_web_2f_tag-font-weight-10 z-tds_2f_web-tds_2f_web_2f_tag-letter-spacing-11 z-tds_2f_web-tds_2f_web_2f_tag-line-height-12 z-tds_2f_web-tds_2f_web_2f_tag-white-space-13 z-tds_2f_web-tds_2f_web_2f_tag-flex-shrink-14 z-tds_2f_web-tds_2f_web_2f_tag-h-15 z-tds_2f_web-tds_2f_web_2f_tag-w-16 z-tds_2f_web-tds_2f_web_2f_tag-cursor-17 z-tds_2f_web-tds_2f_web_2f_tag-outline-color-18 z-tds_2f_web-tds_2f_web_2f_tag-outline-offset-19 z-tds_2f_web-tds_2f_web_2f_tag-outline-style-20 z-tds_2f_web-tds_2f_web_2f_tag-outline-width-21 z-tds_2f_web-tds_2f_web_2f_tag-text-decoration-22 z-tds_2f_web-tds_2f_web_2f_tag-transition-duration-23 z-tds_2f_web-tds_2f_web_2f_tag-transition-property-24 z-tds_2f_web-tds_2f_web_2f_tag-transition-timing-function-25 z-tds_2f_web-tds_2f_web_2f_tag-scale-26 z-tds_2f_web-tds_2f_web_2f_tag-outline-color-27 z-tds_2f_web-tds_2f_web_2f_tag-outline-offset-28 z-tds_2f_web-tds_2f_web_2f_tag-opacity-29 z-tds_2f_web-tds_2f_web_2f_tag-cursor-30 z-tds_2f_web-tds_2f_web_2f_tag-opacity-31 z-tds_2f_web-tds_2f_web_2f_tag-transition-property-32 z-tds_2f_web-tds_2f_web_2f_tag-scale-33 z-tds_2f_web-tds_2f_web_2f_tag-bg-34 z-tds_2f_web-tds_2f_web_2f_tag-text-35 z-tds_2f_web-tds_2f_web_2f_tag-bg-36 z-tds_2f_web-tds_2f_web_2f_tag-text-37 z-tds_2f_web-tds_2f_web_2f_tag-bg-38 z-tds_2f_web-tds_2f_web_2f_tag-text-39 z-tds_2f_web-tds_2f_web_2f_tag-bg-40 z-tds_2f_web-tds_2f_web_2f_tag-text-41 z-tds_2f_web-tds_2f_web_2f_tag-bg-42 z-tds_2f_web-tds_2f_web_2f_tag-text-43 z-tds_2f_web-tds_2f_web_2f_tag-bg-44 z-tds_2f_web-tds_2f_web_2f_tag-text-45 z-tds_2f_web-tds_2f_web_2f_tag-border-radius-46 z-tds_2f_web-tds_2f_web_2f_tag-border-radius-47 z-tds_2f_web-tds_2f_web_2f_tag-h-48 z-tds_2f_web-tds_2f_web_2f_tag-padding-inline-49 z-tds_2f_web-tds_2f_web_2f_tag-font-family-50 z-tds_2f_web-tds_2f_web_2f_tag-font-size-51 z-tds_2f_web-tds_2f_web_2f_tag-font-weight-52 z-tds_2f_web-tds_2f_web_2f_tag-letter-spacing-53 z-tds_2f_web-tds_2f_web_2f_tag-line-height-54 z-tds_2f_web-tds_2f_web_2f_tag-h-55 z-tds_2f_web-tds_2f_web_2f_tag-padding-inline-56 z-tds_2f_web-tds_2f_web_2f_tag-bg-57 z-tds_2f_web-tds_2f_web_2f_tag-border-color-58 z-tds_2f_web-tds_2f_web_2f_tag-bg-59 z-tds_2f_web-tds_2f_web_2f_tag-padding-inline-60"});
-})(styles || (styles = {}));
-//# sourceMappingURL=Tag.js.map
-import './Tag.css';

package/dist/web/components/Tag.js.map

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