@qasa/qds-ui 0.35.0 → 0.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -879,15 +879,31 @@ type BreakpointsConfig$1<T> = PartialRecord<keyof Theme['breakpoints'], T> & {
879
879
  };
880
880
  type ResponsiveProp<T> = T | BreakpointsConfig$1<T>;
881
881
 
882
- declare const SIZE_CLASSES$4: {
883
- xs: string;
884
- sm: string;
885
- md: string;
886
- lg: string;
887
- xl: string;
888
- '2xl': string;
889
- };
890
- type AvatarSize = keyof typeof SIZE_CLASSES$4;
882
+ /**
883
+ * A responsive class map declared via `defineResponsiveClasses`. Carries both
884
+ * the per-key class strings and the default key used when no responsive value
885
+ * is provided.
886
+ *
887
+ * Construct only via `defineResponsiveClasses`; the build-time safelist scanner
888
+ * (`scripts/responsive-safelist/responsive-safelist.ts`) detects the literal
889
+ * call and emits `@source inline(...)` directives so Tailwind compiles the
890
+ * breakpoint-prefixed variants.
891
+ */
892
+ interface ResponsiveClassMap<T extends string> {
893
+ readonly classes: Record<T, string>;
894
+ readonly default: T;
895
+ }
896
+ /**
897
+ * Derives the size literal union from a class map.
898
+ *
899
+ * @example
900
+ * const SIZE_CLASSES = defineResponsiveClasses({ sm: 'h-10', md: 'h-12' }, 'md')
901
+ * type ButtonSize = ResponsiveSize<typeof SIZE_CLASSES>
902
+ */
903
+ type ResponsiveSize<M> = M extends ResponsiveClassMap<infer T> ? T : never;
904
+
905
+ declare const SIZE_CLASSES$7: ResponsiveClassMap<"2xl" | "xl" | "lg" | "md" | "sm" | "xs">;
906
+ type AvatarSize = ResponsiveSize<typeof SIZE_CLASSES$7>;
891
907
  interface AvatarOptions {
892
908
  /**
893
909
  * Source url of the image to display. If not passed
@@ -1032,6 +1048,7 @@ declare const ArrowRightIcon: react.ForwardRefExoticComponent<IconProps & react.
1032
1048
  declare const ArrowUpIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
1033
1049
  declare const BellIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
1034
1050
  declare const BellOffIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
1051
+ declare const BookmarkFilledIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
1035
1052
  declare const BookmarkIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
1036
1053
  declare const CalendarIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
1037
1054
  declare const CameraIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
@@ -1072,17 +1089,11 @@ declare const UserIcon: react.ForwardRefExoticComponent<IconProps & react.RefAtt
1072
1089
  declare const XCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
1073
1090
  declare const XIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
1074
1091
 
1075
- declare const SIZE_CLASSES$3: {
1076
- xs: string;
1077
- sm: string;
1078
- md: string;
1079
- lg: string;
1080
- xl: string;
1081
- };
1092
+ declare const SIZE_CLASSES$6: ResponsiveClassMap<"xl" | "lg" | "md" | "sm" | "xs">;
1082
1093
  declare const buttonVariants: (props?: ({
1083
1094
  variant?: "primary" | "secondary" | "tertiary" | "danger" | null | undefined;
1084
1095
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1085
- type ButtonSize = keyof typeof SIZE_CLASSES$3;
1096
+ type ButtonSize = ResponsiveSize<typeof SIZE_CLASSES$6>;
1086
1097
  type ButtonVariant = NonNullable<VariantProps$1<typeof buttonVariants>['variant']>;
1087
1098
  interface ButtonOptions {
1088
1099
  /**
@@ -1128,9 +1139,22 @@ type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
1128
1139
  type ButtonProps = PropsOf<PolymorphicButton>;
1129
1140
  declare const Button: PolymorphicButton;
1130
1141
 
1131
- type DisplaySize = keyof Theme['typography']['display'];
1132
- type DisplayTextAlign = 'left' | 'center' | 'right';
1133
- type DisplayTextWrap = 'pretty' | 'balance' | 'wrap' | 'nowrap' | 'stable';
1142
+ declare const SIZE_CLASSES$5: ResponsiveClassMap<"2xl" | "3xl" | "xl" | "lg" | "md" | "sm" | "xs" | "2xs">;
1143
+ declare const TEXT_ALIGN_CLASSES$2: {
1144
+ readonly left: "text-left";
1145
+ readonly center: "text-center";
1146
+ readonly right: "text-right";
1147
+ };
1148
+ declare const TEXT_WRAP_CLASSES: {
1149
+ readonly pretty: "text-pretty";
1150
+ readonly balance: "text-balance";
1151
+ readonly wrap: "text-wrap";
1152
+ readonly nowrap: "text-nowrap";
1153
+ readonly stable: "[text-wrap:stable]";
1154
+ };
1155
+ type DisplaySize = ResponsiveSize<typeof SIZE_CLASSES$5>;
1156
+ type DisplayTextAlign = keyof typeof TEXT_ALIGN_CLASSES$2;
1157
+ type DisplayTextWrap = keyof typeof TEXT_WRAP_CLASSES;
1134
1158
  interface DisplayTextOptions {
1135
1159
  /**
1136
1160
  * Sets the visual size of the display text.
@@ -1368,8 +1392,27 @@ declare const DropdownMenu: typeof DropdownMenuRoot & {
1368
1392
  Divider: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
1369
1393
  };
1370
1394
 
1371
- type HeadingSize = keyof Theme['typography']['title'];
1372
- type HeadingColor = keyof Theme['colors']['text'];
1395
+ declare const SIZE_CLASSES$4: ResponsiveClassMap<"lg" | "md" | "sm" | "xs" | "2xs" | "3xs">;
1396
+ declare const COLOR_CLASSES$2: {
1397
+ readonly default: "text-default";
1398
+ readonly strong: "text-strong";
1399
+ readonly subtle: "text-subtle";
1400
+ readonly disabled: "text-disabled";
1401
+ readonly negative: "text-negative";
1402
+ readonly warning: "text-warning";
1403
+ readonly positive: "text-positive";
1404
+ readonly onBrandPrimary: "text-onBrandPrimary";
1405
+ readonly onBrandSecondary: "text-onBrandSecondary";
1406
+ readonly onBrandTertiary: "text-onBrandTertiary";
1407
+ };
1408
+ declare const TEXT_ALIGN_CLASSES$1: {
1409
+ readonly left: "text-left";
1410
+ readonly center: "text-center";
1411
+ readonly right: "text-right";
1412
+ };
1413
+ type HeadingSize = ResponsiveSize<typeof SIZE_CLASSES$4>;
1414
+ type HeadingColor = keyof typeof COLOR_CLASSES$2;
1415
+ type HeadingTextAlign = keyof typeof TEXT_ALIGN_CLASSES$1;
1373
1416
  interface HeadingOptions {
1374
1417
  /**
1375
1418
  * Sets the visual size of the heading.
@@ -1391,7 +1434,7 @@ interface HeadingOptions {
1391
1434
  * Alignment of the heading
1392
1435
  * @default 'left'
1393
1436
  */
1394
- textAlign?: 'left' | 'center' | 'right';
1437
+ textAlign?: HeadingTextAlign;
1395
1438
  }
1396
1439
  type HeadingComponent = ForwardRefComponent<'h2', HeadingOptions>;
1397
1440
  /**
@@ -1409,15 +1452,11 @@ declare const HintBox: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLPr
1409
1452
  Title: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
1410
1453
  };
1411
1454
 
1412
- declare const SIZE_CLASSES$2: {
1413
- xs: string;
1414
- sm: string;
1415
- md: string;
1416
- };
1455
+ declare const SIZE_CLASSES$3: ResponsiveClassMap<"md" | "sm" | "xs">;
1417
1456
  declare const iconButtonVariants: (props?: ({
1418
1457
  variant?: "white" | "primary" | "secondary" | "tertiary" | "danger" | "ghost" | null | undefined;
1419
1458
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1420
- type IconButtonSize = keyof typeof SIZE_CLASSES$2;
1459
+ type IconButtonSize = ResponsiveSize<typeof SIZE_CLASSES$3>;
1421
1460
  type IconButtonVariant = NonNullable<VariantProps$1<typeof iconButtonVariants>['variant']>;
1422
1461
  interface IconButtonOptions {
1423
1462
  icon: ElementType<IconProps>;
@@ -1490,11 +1529,8 @@ interface TextFieldProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$7>, Te
1490
1529
  }
1491
1530
  declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
1492
1531
 
1493
- declare const SIZE_CLASSES$1: {
1494
- sm: string;
1495
- md: string;
1496
- };
1497
- declare const COLOR_CLASSES: {
1532
+ declare const SIZE_CLASSES$2: ResponsiveClassMap<"md" | "sm">;
1533
+ declare const COLOR_CLASSES$1: {
1498
1534
  readonly strong: "text-strong";
1499
1535
  readonly default: "text-default";
1500
1536
  readonly subtle: "text-subtle";
@@ -1506,8 +1542,8 @@ declare const COLOR_CLASSES: {
1506
1542
  readonly onBrandSecondary: "text-onBrandSecondary";
1507
1543
  readonly onBrandTertiary: "text-onBrandTertiary";
1508
1544
  };
1509
- type LabelSize = keyof typeof SIZE_CLASSES$1;
1510
- type LabelColor = keyof typeof COLOR_CLASSES;
1545
+ type LabelSize = ResponsiveSize<typeof SIZE_CLASSES$2>;
1546
+ type LabelColor = keyof typeof COLOR_CLASSES$1;
1511
1547
  interface LabelOptions {
1512
1548
  /**
1513
1549
  * Size of the label
@@ -1537,11 +1573,8 @@ type LinkComponent = ForwardRefComponent<'a', LinkOptions>;
1537
1573
  type LinkProps = PropsOf<LinkComponent>;
1538
1574
  declare const Link: LinkComponent;
1539
1575
 
1540
- declare const SIZE_CLASSES: {
1541
- sm: string;
1542
- md: string;
1543
- };
1544
- type LoadingDotsSize = keyof typeof SIZE_CLASSES;
1576
+ declare const SIZE_CLASSES$1: ResponsiveClassMap<"md" | "sm">;
1577
+ type LoadingDotsSize = ResponsiveSize<typeof SIZE_CLASSES$1>;
1545
1578
  interface LoadingDotsOptions {
1546
1579
  size?: ResponsiveProp<LoadingDotsSize>;
1547
1580
  }
@@ -1549,109 +1582,27 @@ interface LoadingDotsProps extends HTMLQdsProps<'span'>, LoadingDotsOptions {
1549
1582
  }
1550
1583
  declare const LoadingDots: react.ForwardRefExoticComponent<LoadingDotsProps & react.RefAttributes<HTMLSpanElement>>;
1551
1584
 
1552
- type NamedStyles = Record<string, CSSObject>;
1553
- type StyleInterpolation<T> = (theme: Theme) => T;
1554
- /**
1555
- * Creates a collection of named style rules.
1556
- */
1557
- declare function createStyleVariants<T extends NamedStyles>(styles: StyleInterpolation<T>): (theme: Theme) => T;
1558
- /**
1559
- * Create a style object. Useful for creating styles that depend on the theme.
1560
- */
1561
- declare function createStyle<T extends CSSObject>(styles: StyleInterpolation<T>): (theme: Theme) => T;
1562
- type VariantProps<T extends ReturnType<typeof createStyle | typeof createStyleVariants>> = keyof ReturnType<T>;
1563
- /**
1564
- * Converts css `px` unit to `rem`.
1565
- * Assumes the root font size is 16px.
1566
- */
1567
- declare const pxToRem: (px: number) => string;
1568
-
1569
- declare const getFormFieldBaseStyles: (theme: Theme) => {
1570
- '&::placeholder': {
1571
- color: string;
1572
- };
1573
- '&:hover': {
1574
- borderColor: string;
1575
- };
1576
- '&:focus': {
1577
- outline: number;
1578
- borderColor: string;
1579
- boxShadow: `0 0 0 1px ${string}`;
1580
- };
1581
- '&[aria-invalid="true"]': {
1582
- borderColor: string;
1583
- '&:focus': {
1584
- boxShadow: `0 0 0 1px ${string}`;
1585
- };
1586
- };
1587
- '&[disabled], &:disabled, &[data-disabled]': {
1588
- opacity: number;
1589
- borderColor: string;
1590
- };
1591
- transitionProperty: "opacity, border-color, box-shadow";
1592
- transitionDuration: "120ms";
1593
- transitionTimingFunction: "ease";
1594
- fontFamily: string;
1595
- fontWeight: string;
1596
- fontSize: string;
1597
- lineHeight: string;
1598
- letterSpacing: string;
1599
- width: string;
1600
- minWidth: number;
1601
- appearance: "none";
1602
- paddingLeft: string;
1603
- paddingRight: string;
1604
- border: string;
1605
- borderRadius: string;
1606
- backgroundColor: string;
1607
- color: string;
1608
- WebkitTouchCallout: "none";
1609
- WebkitTapHighlightColor: "transparent";
1610
- '&::-webkit-date-and-time-value': {
1611
- textAlign: "left";
1612
- };
1613
- alignItems: "center";
1585
+ declare const SIZE_CLASSES: ResponsiveClassMap<"xl" | "lg" | "md" | "sm" | "xs">;
1586
+ declare const COLOR_CLASSES: {
1587
+ readonly default: "text-default";
1588
+ readonly strong: "text-strong";
1589
+ readonly subtle: "text-subtle";
1590
+ readonly disabled: "text-disabled";
1591
+ readonly negative: "text-negative";
1592
+ readonly warning: "text-warning";
1593
+ readonly positive: "text-positive";
1594
+ readonly onBrandPrimary: "text-onBrandPrimary";
1595
+ readonly onBrandSecondary: "text-onBrandSecondary";
1596
+ readonly onBrandTertiary: "text-onBrandTertiary";
1614
1597
  };
1615
-
1616
- declare const getSizeStyles: (theme: Theme) => {
1617
- xs: {
1618
- fontFamily: string;
1619
- fontWeight: string;
1620
- fontSize: string;
1621
- lineHeight: string;
1622
- letterSpacing: string;
1623
- };
1624
- sm: {
1625
- fontFamily: string;
1626
- fontWeight: string;
1627
- fontSize: string;
1628
- lineHeight: string;
1629
- letterSpacing: string;
1630
- };
1631
- md: {
1632
- fontFamily: string;
1633
- fontWeight: string;
1634
- fontSize: string;
1635
- lineHeight: string;
1636
- letterSpacing: string;
1637
- };
1638
- lg: {
1639
- fontFamily: string;
1640
- fontWeight: string;
1641
- fontSize: string;
1642
- lineHeight: string;
1643
- letterSpacing: string;
1644
- };
1645
- xl: {
1646
- fontFamily: string;
1647
- fontWeight: string;
1648
- fontSize: string;
1649
- lineHeight: string;
1650
- letterSpacing: string;
1651
- };
1598
+ declare const TEXT_ALIGN_CLASSES: {
1599
+ readonly left: "text-left";
1600
+ readonly center: "text-center";
1601
+ readonly right: "text-right";
1652
1602
  };
1653
- type ParagraphSize = VariantProps<typeof getSizeStyles>;
1654
- type ParagraphColor = keyof Theme['colors']['text'];
1603
+ type ParagraphSize = ResponsiveSize<typeof SIZE_CLASSES>;
1604
+ type ParagraphColor = keyof typeof COLOR_CLASSES;
1605
+ type ParagraphTextAlign = keyof typeof TEXT_ALIGN_CLASSES;
1655
1606
  interface ParagraphOptions {
1656
1607
  /**
1657
1608
  * Sets the visual size of the text
@@ -1671,7 +1622,7 @@ interface ParagraphOptions {
1671
1622
  * Alignment of the paragraph
1672
1623
  * @default 'left'
1673
1624
  */
1674
- textAlign?: 'left' | 'center' | 'right';
1625
+ textAlign?: ParagraphTextAlign;
1675
1626
  }
1676
1627
  type ParagraphComponent = ForwardRefComponent<'p', ParagraphOptions>;
1677
1628
  /**
@@ -1712,7 +1663,6 @@ interface SelectBaseProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$6>,
1712
1663
  declare const SelectBase: react.ForwardRefExoticComponent<SelectBaseProps & react.RefAttributes<HTMLSelectElement>>;
1713
1664
 
1714
1665
  type ResizeProp = 'none' | 'both' | 'horizontal' | 'vertical';
1715
- type MinRowsProp = number;
1716
1666
  interface TextareaBaseOptions {
1717
1667
  /**
1718
1668
  * If `true`, the textarea will be invalid
@@ -1738,7 +1688,7 @@ interface TextareaBaseOptions {
1738
1688
  *
1739
1689
  * @default 3
1740
1690
  */
1741
- minRows?: MinRowsProp;
1691
+ minRows?: number;
1742
1692
  }
1743
1693
  type OmittedProps$5 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required' | 'rows' | 'cols';
1744
1694
  interface TextareaBaseProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$5>, TextareaBaseOptions {
@@ -1869,7 +1819,9 @@ declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAtt
1869
1819
  Option: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLOptionElement>>;
1870
1820
  };
1871
1821
 
1872
- type Spacing = keyof Theme['spacing'];
1822
+ declare const X_SIZE_CLASSES: ResponsiveClassMap<"4x" | "0x" | "1x" | "2x" | "3x" | "5x" | "6x" | "8x" | "10x" | "12x" | "14x" | "16x" | "20x" | "24x">;
1823
+ declare const Y_SIZE_CLASSES: ResponsiveClassMap<"4x" | "0x" | "1x" | "2x" | "3x" | "5x" | "6x" | "8x" | "10x" | "12x" | "14x" | "16x" | "20x" | "24x">;
1824
+ type Spacing = ResponsiveSize<typeof X_SIZE_CLASSES> & ResponsiveSize<typeof Y_SIZE_CLASSES>;
1873
1825
  interface SpacerOptions {
1874
1826
  axis?: 'x' | 'y';
1875
1827
  size: ResponsiveProp<Spacing>;
@@ -1884,12 +1836,20 @@ interface SpacerProps extends HTMLQdsProps<'span'>, SpacerOptions {
1884
1836
  */
1885
1837
  declare const Spacer: react.ForwardRefExoticComponent<SpacerProps & react.RefAttributes<HTMLSpanElement>>;
1886
1838
 
1887
- type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
1888
- type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
1889
- type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
1890
- type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
1891
-
1892
- type GapProp = keyof Theme['spacing'];
1839
+ declare const DIRECTION_CLASSES: ResponsiveClassMap<"row" | "column" | "column-reverse" | "row-reverse">;
1840
+ declare const JUSTIFY_CONTENT_CLASSES: ResponsiveClassMap<"center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly">;
1841
+ declare const ALIGN_ITEMS_CLASSES: ResponsiveClassMap<"center" | "flex-end" | "flex-start" | "baseline" | "stretch">;
1842
+ declare const GAP_CLASSES: ResponsiveClassMap<"4x" | "0x" | "1x" | "2x" | "3x" | "5x" | "6x" | "8x" | "10x" | "12x" | "14x" | "16x" | "20x" | "24x">;
1843
+ declare const WRAP_CLASSES: {
1844
+ readonly wrap: "flex-wrap";
1845
+ readonly nowrap: "flex-nowrap";
1846
+ readonly 'wrap-reverse': "flex-wrap-reverse";
1847
+ };
1848
+ type FlexDirection = ResponsiveSize<typeof DIRECTION_CLASSES>;
1849
+ type JustifyContent = ResponsiveSize<typeof JUSTIFY_CONTENT_CLASSES>;
1850
+ type AlignItems = ResponsiveSize<typeof ALIGN_ITEMS_CLASSES>;
1851
+ type GapProp = ResponsiveSize<typeof GAP_CLASSES>;
1852
+ type FlexWrap = keyof typeof WRAP_CLASSES;
1893
1853
  interface StackOptions {
1894
1854
  /**
1895
1855
  * The direction of the stack.
@@ -2025,6 +1985,80 @@ declare const toast: ((text: string, options?: ToastOptions) => Id) & {
2025
1985
  removeAll: () => void;
2026
1986
  };
2027
1987
 
1988
+ type NamedStyles = Record<string, CSSObject>;
1989
+ type StyleInterpolation<T> = (theme: Theme) => T;
1990
+ /**
1991
+ * @deprecated Tied to the Emotion theme. Will be removed when Emotion is dropped.
1992
+ * Compose styles directly with Tailwind classes.
1993
+ */
1994
+ declare function createStyleVariants<T extends NamedStyles>(styles: StyleInterpolation<T>): (theme: Theme) => T;
1995
+ /**
1996
+ * @deprecated Tied to the Emotion theme. Will be removed when Emotion is dropped.
1997
+ * Compose styles directly with Tailwind classes.
1998
+ */
1999
+ declare function createStyle<T extends CSSObject>(styles: StyleInterpolation<T>): (theme: Theme) => T;
2000
+ /**
2001
+ * @deprecated Tied to the Emotion theme. Will be removed when Emotion is dropped.
2002
+ */
2003
+ type VariantProps<T extends ReturnType<typeof createStyle | typeof createStyleVariants>> = keyof ReturnType<T>;
2004
+ /**
2005
+ * @deprecated Will be removed when Emotion is dropped.
2006
+ * Use Tailwind spacing utilities instead, eg. `p-4` for 16px padding.
2007
+ * If you need a raw value, reference the CSS variable directly: `var(--spacing-4)`.
2008
+ */
2009
+ declare const pxToRem: (px: number) => string;
2010
+
2011
+ /**
2012
+ * @deprecated Emotion-based form field base styles. Will be removed when Emotion is dropped.
2013
+ * Use the form primitives (`input-base`, `textarea-base`, `select-base`) or compose Tailwind classes directly.
2014
+ */
2015
+ declare const getFormFieldBaseStyles: (theme: Theme) => {
2016
+ '&::placeholder': {
2017
+ color: string;
2018
+ };
2019
+ '&:hover': {
2020
+ borderColor: string;
2021
+ };
2022
+ '&:focus': {
2023
+ outline: number;
2024
+ borderColor: string;
2025
+ boxShadow: `0 0 0 1px ${string}`;
2026
+ };
2027
+ '&[aria-invalid="true"]': {
2028
+ borderColor: string;
2029
+ '&:focus': {
2030
+ boxShadow: `0 0 0 1px ${string}`;
2031
+ };
2032
+ };
2033
+ '&[disabled], &:disabled, &[data-disabled]': {
2034
+ opacity: number;
2035
+ borderColor: string;
2036
+ };
2037
+ transitionProperty: "opacity, border-color, box-shadow";
2038
+ transitionDuration: "120ms";
2039
+ transitionTimingFunction: "ease";
2040
+ fontFamily: string;
2041
+ fontWeight: string;
2042
+ fontSize: string;
2043
+ lineHeight: string;
2044
+ letterSpacing: string;
2045
+ width: string;
2046
+ minWidth: number;
2047
+ appearance: "none";
2048
+ paddingLeft: string;
2049
+ paddingRight: string;
2050
+ border: string;
2051
+ borderRadius: string;
2052
+ backgroundColor: string;
2053
+ color: string;
2054
+ WebkitTouchCallout: "none";
2055
+ WebkitTapHighlightColor: "transparent";
2056
+ '&::-webkit-date-and-time-value': {
2057
+ textAlign: "left";
2058
+ };
2059
+ alignItems: "center";
2060
+ };
2061
+
2028
2062
  interface UseBreakpointOptions {
2029
2063
  /**
2030
2064
  * If `true` the initial value will be `base` instead of the current breakpoint.
@@ -2036,6 +2070,11 @@ interface UseBreakpointOptions {
2036
2070
  }
2037
2071
  /**
2038
2072
  * Hook for getting the current breakpoint.
2073
+ *
2074
+ * @deprecated Prefer Tailwind responsive classes (`md:hidden`, `hidden md:block`, etc.) for
2075
+ * styling and conditional rendering. For JS logic that genuinely needs a breakpoint read
2076
+ * (scroll lock, keydown gates, etc.), use a media-query hook such as `useMediaQuery` from
2077
+ * `usehooks-ts`.
2039
2078
  */
2040
2079
  declare function useBreakpoint(params?: UseBreakpointOptions): {
2041
2080
  currentBreakpoint: "2xl" | "base" | "xl" | "lg" | "md" | "sm";
@@ -2049,6 +2088,11 @@ type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
2049
2088
  /**
2050
2089
  * Hook for getting a value based on the current breakpoint.
2051
2090
  *
2091
+ * @deprecated Prefer Tailwind responsive classes (`md:hidden`, `hidden md:block`, etc.) for
2092
+ * styling and conditional rendering. For JS logic that genuinely needs a breakpoint read
2093
+ * (scroll lock, keydown gates, etc.), use a media-query hook such as `useMediaQuery` from
2094
+ * `usehooks-ts`.
2095
+ *
2052
2096
  * @example
2053
2097
  * const width = useBreakpointValue({ base: '150px', md: '250px' })
2054
2098
  */
@@ -2115,4 +2159,4 @@ declare function useStableId(fixedId?: string | null): string;
2115
2159
  */
2116
2160
  declare const useSafeLayoutEffect: typeof useLayoutEffect;
2117
2161
 
2118
- export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, type AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, type ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, type CreateIconOptions, DisplayText, type DisplayTextProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuContentProps, type DropdownMenuDividerProps, type DropdownMenuItemProps, type DropdownMenuRootProps, type DropdownMenuTriggerProps, type ForwardRefComponent, GlobeIcon, Heading, type HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, type HintBoxProps, type HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, type IconButtonProps, type IconProps, ImageIcon, InfoIcon, InputBase, type InputBaseOptions, type InputBaseProps, type IntrinsicElement, Label, type LabelProps, Link, type LinkProps, ListFilterIcon, ListIcon, LoadingDots, type LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, type OwnProps, Paragraph, type ParagraphProps, PenIcon, PlusIcon, type PropsOf, QdsProvider, type RadioButtonProps, type RadioCardProps, RadioGroup, type RadioGroupLabelProps, type RadioGroupProps, SearchIcon, Select, SelectBase, type SelectBaseOptions, type SelectOptionProps, type SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, type SpacerProps, Stack, type StackProps, StarFilledIcon, StarIcon, Switch, type SwitchProps, TextField, type TextFieldProps, Textarea, TextareaBase, type TextareaBaseOptions, type TextareaBaseProps, type TextareaProps, type Theme, type ThemeOverrides, Toast, TrashIcon, type UseBreakpointOptions, type UseBreakpointValueProps, type UseFormFieldProps, UserIcon, type VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useSafeLayoutEffect, useStableId };
2162
+ export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, type AvatarProps, BellIcon, BellOffIcon, BookmarkFilledIcon, BookmarkIcon, Button, type ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, type CreateIconOptions, DisplayText, type DisplayTextProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuContentProps, type DropdownMenuDividerProps, type DropdownMenuItemProps, type DropdownMenuRootProps, type DropdownMenuTriggerProps, type ForwardRefComponent, GlobeIcon, Heading, type HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, type HintBoxProps, type HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, type IconButtonProps, type IconProps, ImageIcon, InfoIcon, InputBase, type InputBaseOptions, type InputBaseProps, type IntrinsicElement, Label, type LabelProps, Link, type LinkProps, ListFilterIcon, ListIcon, LoadingDots, type LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, type OwnProps, Paragraph, type ParagraphProps, PenIcon, PlusIcon, type PropsOf, QdsProvider, type RadioButtonProps, type RadioCardProps, RadioGroup, type RadioGroupLabelProps, type RadioGroupProps, SearchIcon, Select, SelectBase, type SelectBaseOptions, type SelectOptionProps, type SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, type SpacerProps, Stack, type StackProps, StarFilledIcon, StarIcon, Switch, type SwitchProps, TextField, type TextFieldProps, Textarea, TextareaBase, type TextareaBaseOptions, type TextareaBaseProps, type TextareaProps, type Theme, type ThemeOverrides, Toast, TrashIcon, type UseBreakpointOptions, type UseBreakpointValueProps, type UseFormFieldProps, UserIcon, type VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useSafeLayoutEffect, useStableId };