@dnanpm/ui-components 0.5.0 → 0.7.0

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

@@ -1,27 +1,27 @@
 import { ComponentPropsWithRef, ComponentType, ReactNode, SVGProps } from 'react';
-export type IconButtonVariant = 'default' | 'link';
 export type IconPosition = 'start' | 'end';
 export type IconButtonSize = 'normal' | 'small';
+export type IconButtonLabelBehavior = 'truncate' | 'wrap';
 export type Icon = ComponentType<SVGProps<SVGSVGElement>>;
 export interface IconButtonLinkProps extends ComponentPropsWithRef<'a'> {
     readonly href: string;
     readonly children: ReactNode;
 }
-interface IconButtonBaseProps {
-    /**
-     * Visual variant for text/icon coloring.
-     * @default 'default'
-     */
-    readonly variant?: IconButtonVariant;
-    /** Icon component (for example, `ChevronRight` from `@dnanpm/icons`). */
-    readonly icon: Icon;
+type IconButtonBaseProps = {
     /** Visible label content used as the button/link accessible name. */
     readonly children: ReactNode;
+    /** Icon component (for example, `ChevronRight` from `@dnanpm/icons`). */
+    readonly icon: Icon;
     /**
      * Position of the icon relative to label text.
      * @default 'start'
      */
     readonly iconPosition?: IconPosition;
+    /**
+     * Controls how the text label behaves in narrow layouts.
+     * @default 'truncate'
+     */
+    readonly labelBehavior?: IconButtonLabelBehavior;
     /**
      * Size variant controlling typography and icon size.
      * @default 'normal'
@@ -33,7 +33,12 @@ interface IconButtonBaseProps {
      * @default false
      */
     readonly loading?: boolean;
-}
+    /**
+     * Applies link coloring to text and icon.
+     * @default false
+     */
+    readonly linkColoring?: boolean;
+};
 export type IconButtonAsButton = IconButtonBaseProps & Omit<ComponentPropsWithRef<'button'>, keyof IconButtonBaseProps> & {
     readonly href?: never;
     readonly target?: never;

package/dist/components/IconButton/IconButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAC;AACnD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAC3C,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,MAAM,MAAM,IAAI,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IACnE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC;AAED,UAAU,mBAAmB;IACzB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IACrC,yEAAyE;IACzE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB,qEAAqE;IACrE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,mBAAmB,CAAC,GAAG;IAC/D,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;CAC/B,CAAC;AAEN,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,mBAAmB,CAAC,GAAG;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;CACnE,CAAC;AAEN,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}
+{"version":3,"file":"IconButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvF,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAC3C,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAAG,MAAM,CAAC;AAC1D,MAAM,MAAM,IAAI,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IACnE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC;AAED,KAAK,mBAAmB,GAAG;IACvB,qEAAqE;IACrE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACjD;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,mBAAmB,CAAC,GAAG;IAC/D,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;CAC/B,CAAC;AAEN,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,mBAAmB,CAAC,GAAG;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;CACnE,CAAC;AAEN,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}

package/dist/components/IconButton/index.d.ts

@@ -1,3 +1,3 @@
 export { IconButton } from './IconButton';
-export type { Icon, IconPosition, IconButtonLinkProps, IconButtonProps, IconButtonSize, IconButtonVariant, } from './IconButton.types';
+export type { Icon, IconPosition, IconButtonLinkProps, IconButtonProps, IconButtonSize, } from './IconButton.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/IconButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,iBAAiB,GACpB,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,cAAc,GACjB,MAAM,oBAAoB,CAAC"}

package/dist/components/Label/Label.css

@@ -1,9 +1,14 @@
-@layer dds-components {._label_1bsev_1 {
+@layer dds-components {._label_7ugso_1 {
+    --_label-height: 22px;
+
     display: inline-block;
+    height: var(--_label-height);
     max-width: 100%;
-    padding: var(--spacing-ui-xxs) var(--spacing-ui-lg);
+    padding: 0 var(--spacing-space-20);
     border-radius: var(--radius-semantic-full);
     font: var(--typography-label-md-bold);
+    /* exception: override line-height from font shorthand to lock height (22px) — prevents element height drift when text truncates */
+    line-height: var(--_label-height);
     text-align: center;
     text-transform: uppercase;
     white-space: nowrap;
@@ -12,27 +17,27 @@
     color: var(--color-semantic-foreground-default);
 }
 
-._label--default_1bsev_15 {
+._label--default_7ugso_20 {
     background-color: var(--color-semantic-surface-base);
 }
 
-._label--campaign_1bsev_19 {
+._label--campaign_7ugso_24 {
     background-color: var(--color-semantic-surface-primary-mid);
 }
 
-._label--new_1bsev_23 {
+._label--new_7ugso_28 {
     background-color: var(--color-semantic-accent-lemon-strong);
 }
 
-._label--presale_1bsev_27 {
+._label--presale_7ugso_32 {
     background-color: var(--color-semantic-accent-orange-strong);
 }
 
-._label--soldout_1bsev_31 {
+._label--soldout_7ugso_36 {
     background-color: var(--color-semantic-surface-neutral-strong);
 }
 
-._label--other_1bsev_35 {
+._label--other_7ugso_40 {
     background-color: var(--color-semantic-accent-sky-strong);
 }
 }

package/dist/components/Label/Label.module.css.cjs

@@ -1,15 +1,15 @@
 require('./Label.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const label = "_label_1bsev_1";
+const label = "_label_7ugso_1";
 const styles = {
   label,
-  "label--default": "_label--default_1bsev_15",
-  "label--campaign": "_label--campaign_1bsev_19",
-  "label--new": "_label--new_1bsev_23",
-  "label--presale": "_label--presale_1bsev_27",
-  "label--soldout": "_label--soldout_1bsev_31",
-  "label--other": "_label--other_1bsev_35"
+  "label--default": "_label--default_7ugso_20",
+  "label--campaign": "_label--campaign_7ugso_24",
+  "label--new": "_label--new_7ugso_28",
+  "label--presale": "_label--presale_7ugso_32",
+  "label--soldout": "_label--soldout_7ugso_36",
+  "label--other": "_label--other_7ugso_40"
 };
 exports.default = styles;
 exports.label = label;

package/dist/components/Label/Label.module.css.js

@@ -1,13 +1,13 @@
 import './Label.css';
-const label = "_label_1bsev_1";
+const label = "_label_7ugso_1";
 const styles = {
   label,
-  "label--default": "_label--default_1bsev_15",
-  "label--campaign": "_label--campaign_1bsev_19",
-  "label--new": "_label--new_1bsev_23",
-  "label--presale": "_label--presale_1bsev_27",
-  "label--soldout": "_label--soldout_1bsev_31",
-  "label--other": "_label--other_1bsev_35"
+  "label--default": "_label--default_7ugso_20",
+  "label--campaign": "_label--campaign_7ugso_24",
+  "label--new": "_label--new_7ugso_28",
+  "label--presale": "_label--presale_7ugso_32",
+  "label--soldout": "_label--soldout_7ugso_36",
+  "label--other": "_label--other_7ugso_40"
 };
 export {
   styles as default,