@cdx-ui/components 0.0.1-beta.136 → 0.0.1-beta.138

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.
Files changed (12) hide show
  1. package/lib/commonjs/components/Icon/index.js +1 -1
  2. package/lib/commonjs/components/Icon/index.js.map +1 -1
  3. package/lib/commonjs/components/Tabs/styles.js +3 -3
  4. package/lib/module/components/Icon/index.js +1 -1
  5. package/lib/module/components/Icon/index.js.map +1 -1
  6. package/lib/module/components/Tabs/styles.js +3 -3
  7. package/lib/typescript/components/Icon/index.d.ts +3 -10
  8. package/lib/typescript/components/Icon/index.d.ts.map +1 -1
  9. package/lib/typescript/components/Tabs/styles.d.ts +2 -2
  10. package/package.json +4 -4
  11. package/src/components/Icon/index.tsx +3 -10
  12. package/src/components/Tabs/styles.ts +3 -3
package/lib/commonjs/components/Icon/index.js CHANGED
@@ -49,7 +49,7 @@ const StyledIcon = (0, _uniwind.withUniwind)((0, _uniwind.withUniwind)(IconImpl)
49
49
  * <Icon as={ArrowRight} className="text-red-500 size-4" />
50
50
  * ```
51
51
  *
52
- * @param {ForgeIcon | BrandIcon} as - The Forge (or brand) icon component to render.
52
+ * @param {ForgeIcon} as - The Forge icon component to render.
53
53
  * @param {string} className - Utility classes to style the icon using Uniwind.
54
54
  * @param {number} size - Icon size (overrides the size class).
55
55
  * @param {...ForgeIconProps} ...props - Additional icon props passed to the "as" icon.
package/lib/commonjs/components/Icon/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_uniwind","require","_utils","_jsxRuntime","IconImpl","as","IconComponent","props","jsx","StyledIcon","withUniwind","size","fromClassName","styleProperty","color","Icon","className","cn"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAmC,IAAAE,WAAA,GAAAF,OAAA;AAenC,SAASG,QAAQA,CAAC;EAAEC,EAAE,EAAEC,aAAa;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC5D,oBAAO,IAAAJ,WAAA,CAAAK,GAAA,EAACF,aAAa;IAAA,GAAKC;EAAK,CAAG,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,UAAU,GAAG,IAAAC,oBAAW,EAAC,IAAAA,oBAAW,EAACN,QAAQ,CAAC,EAAE;EACpDO,IAAI,EAAE;IACJC,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACDC,KAAK,EAAE;IACLF,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,IAAIA,CAAC;EAAEV,EAAE,EAAEC,aAAa;EAAEU,SAAS;EAAE,GAAGT;AAAiB,CAAC,EAAE;EAC1E,oBACE,IAAAJ,WAAA,CAAAK,GAAA,EAACC,UAAU;IACTJ,EAAE,EAAEC,aAAc;IAClBU,SAAS,EAAE,IAAAC,SAAE,EAAC,6BAA6B,EAAED,SAAS,CAAE;IAAA,GACpDT;EAAK,CACV,CAAC;AAEN","ignoreList":[]}
1
+ {"version":3,"names":["_uniwind","require","_utils","_jsxRuntime","IconImpl","as","IconComponent","props","jsx","StyledIcon","withUniwind","size","fromClassName","styleProperty","color","Icon","className","cn"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAmC,IAAAE,WAAA,GAAAF,OAAA;AAQnC,SAASG,QAAQA,CAAC;EAAEC,EAAE,EAAEC,aAAa;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC5D,oBAAO,IAAAJ,WAAA,CAAAK,GAAA,EAACF,aAAa;IAAA,GAAKC;EAAK,CAAG,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,UAAU,GAAG,IAAAC,oBAAW,EAAC,IAAAA,oBAAW,EAACN,QAAQ,CAAC,EAAE;EACpDO,IAAI,EAAE;IACJC,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACDC,KAAK,EAAE;IACLF,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,IAAIA,CAAC;EAAEV,EAAE,EAAEC,aAAa;EAAEU,SAAS;EAAE,GAAGT;AAAiB,CAAC,EAAE;EAC1E,oBACE,IAAAJ,WAAA,CAAAK,GAAA,EAACC,UAAU;IACTJ,EAAE,EAAEC,aAAc;IAClBU,SAAS,EAAE,IAAAC,SAAE,EAAC,6BAA6B,EAAED,SAAS,CAAE;IAAA,GACpDT;EAAK,CACV,CAAC;AAEN","ignoreList":[]}
package/lib/commonjs/components/Tabs/styles.js CHANGED
@@ -36,10 +36,10 @@ const OUTLINE_INDICATOR_THICKNESS = exports.OUTLINE_INDICATOR_THICKNESS = 2;
36
36
 
37
37
  /**
38
38
  * Shared duration (ms) for the indicator's `withTiming` glide (`index.tsx`) and the tab's
39
- * `duration-300` transition class (below) — kept in sync so the focus ring doesn't snap in
39
+ * `duration-150` transition class (below) — kept in sync so the focus ring doesn't snap in
40
40
  * ahead of a still-sliding solid/outline indicator. Change both together.
41
41
  */
42
- const TABS_INDICATOR_TRANSITION_MS = exports.TABS_INDICATOR_TRANSITION_MS = 300;
42
+ const TABS_INDICATOR_TRANSITION_MS = exports.TABS_INDICATOR_TRANSITION_MS = 150;
43
43
 
44
44
  /** Outline horizontal scroll — narrow fade reads cleanly against the page background. */
45
45
  const TABS_SCROLL_FADE_SIZE = exports.TABS_SCROLL_FADE_SIZE = 32;
@@ -255,7 +255,7 @@ const tabsTabVariants = exports.tabsTabVariants = (0, _classVarianceAuthority.cv
255
255
  // `transition` (not `transition-colors`) — its default property list includes `box-shadow`,
256
256
  // so the focus ring eases in over `TABS_INDICATOR_TRANSITION_MS` instead of snapping in
257
257
  // ahead of the indicator, which glides over the same duration (see `index.tsx`).
258
- 'transition duration-300', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', _constants.DISABLED_CURSOR, _reactNative.Platform.select({
258
+ 'transition duration-150', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', _constants.DISABLED_CURSOR, _reactNative.Platform.select({
259
259
  web: ['outline-none', 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2'].join(' '),
260
260
  default: ''
261
261
  })], {
package/lib/module/components/Icon/index.js CHANGED
@@ -45,7 +45,7 @@ const StyledIcon = withUniwind(withUniwind(IconImpl), {
45
45
  * <Icon as={ArrowRight} className="text-red-500 size-4" />
46
46
  * ```
47
47
  *
48
- * @param {ForgeIcon | BrandIcon} as - The Forge (or brand) icon component to render.
48
+ * @param {ForgeIcon} as - The Forge icon component to render.
49
49
  * @param {string} className - Utility classes to style the icon using Uniwind.
50
50
  * @param {number} size - Icon size (overrides the size class).
51
51
  * @param {...ForgeIconProps} ...props - Additional icon props passed to the "as" icon.
package/lib/module/components/Icon/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["withUniwind","cn","jsx","_jsx","IconImpl","as","IconComponent","props","StyledIcon","size","fromClassName","styleProperty","color","Icon","className"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,SAAS;AACrC,SAASC,EAAE,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAenC,SAASC,QAAQA,CAAC;EAAEC,EAAE,EAAEC,aAAa;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC5D,oBAAOJ,IAAA,CAACG,aAAa;IAAA,GAAKC;EAAK,CAAG,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAGR,WAAW,CAACA,WAAW,CAACI,QAAQ,CAAC,EAAE;EACpDK,IAAI,EAAE;IACJC,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACDC,KAAK,EAAE;IACLF,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,IAAIA,CAAC;EAAER,EAAE,EAAEC,aAAa;EAAEQ,SAAS;EAAE,GAAGP;AAAiB,CAAC,EAAE;EAC1E,oBACEJ,IAAA,CAACK,UAAU;IACTH,EAAE,EAAEC,aAAc;IAClBQ,SAAS,EAAEb,EAAE,CAAC,6BAA6B,EAAEa,SAAS,CAAE;IAAA,GACpDP;EAAK,CACV,CAAC;AAEN","ignoreList":[]}
1
+ {"version":3,"names":["withUniwind","cn","jsx","_jsx","IconImpl","as","IconComponent","props","StyledIcon","size","fromClassName","styleProperty","color","Icon","className"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,SAAS;AACrC,SAASC,EAAE,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQnC,SAASC,QAAQA,CAAC;EAAEC,EAAE,EAAEC,aAAa;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC5D,oBAAOJ,IAAA,CAACG,aAAa;IAAA,GAAKC;EAAK,CAAG,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAGR,WAAW,CAACA,WAAW,CAACI,QAAQ,CAAC,EAAE;EACpDK,IAAI,EAAE;IACJC,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACDC,KAAK,EAAE;IACLF,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,IAAIA,CAAC;EAAER,EAAE,EAAEC,aAAa;EAAEQ,SAAS;EAAE,GAAGP;AAAiB,CAAC,EAAE;EAC1E,oBACEJ,IAAA,CAACK,UAAU;IACTH,EAAE,EAAEC,aAAc;IAClBQ,SAAS,EAAEb,EAAE,CAAC,6BAA6B,EAAEa,SAAS,CAAE;IAAA,GACpDP;EAAK,CACV,CAAC;AAEN","ignoreList":[]}
package/lib/module/components/Tabs/styles.js CHANGED
@@ -33,10 +33,10 @@ export const OUTLINE_INDICATOR_THICKNESS = 2;
33
33
 
34
34
  /**
35
35
  * Shared duration (ms) for the indicator's `withTiming` glide (`index.tsx`) and the tab's
36
- * `duration-300` transition class (below) — kept in sync so the focus ring doesn't snap in
36
+ * `duration-150` transition class (below) — kept in sync so the focus ring doesn't snap in
37
37
  * ahead of a still-sliding solid/outline indicator. Change both together.
38
38
  */
39
- export const TABS_INDICATOR_TRANSITION_MS = 300;
39
+ export const TABS_INDICATOR_TRANSITION_MS = 150;
40
40
 
41
41
  /** Outline horizontal scroll — narrow fade reads cleanly against the page background. */
42
42
  export const TABS_SCROLL_FADE_SIZE = 32;
@@ -252,7 +252,7 @@ export const tabsTabVariants = cva(['relative z-10 items-center justify-center',
252
252
  // `transition` (not `transition-colors`) — its default property list includes `box-shadow`,
253
253
  // so the focus ring eases in over `TABS_INDICATOR_TRANSITION_MS` instead of snapping in
254
254
  // ahead of the indicator, which glides over the same duration (see `index.tsx`).
255
- 'transition duration-300', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR, Platform.select({
255
+ 'transition duration-150', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR, Platform.select({
256
256
  web: ['outline-none', 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2'].join(' '),
257
257
  default: ''
258
258
  })], {
package/lib/typescript/components/Icon/index.d.ts CHANGED
@@ -1,14 +1,7 @@
1
- import type { ForgeIcon, ForgeIconProps, BrandIcon } from '@cdx-ui/icons';
1
+ import type { ForgeIcon, ForgeIconProps } from '@cdx-ui/icons';
2
2
  export type IconProps = ForgeIconProps & {
3
3
  className?: string;
4
- /**
5
- * The icon component to render. Accepts `BrandIcon` components (e.g. `WhatsApp`
6
- * from `@cdx-ui/icons`) in addition to themeable `ForgeIcon`s — the `size`
7
- * portion of `className` still applies, but brand icons ignore `color`/`filled`
8
- * (they are permanently fixed-color and non-themeable; see
9
- * docs/internal/research/brand-icons-direction-summary.md).
10
- */
11
- as: ForgeIcon | BrandIcon;
4
+ as: ForgeIcon;
12
5
  };
13
6
  /**
14
7
  * A wrapper component for CDX icons with Uniwind `className` support via `withUniwind`.
@@ -25,7 +18,7 @@ export type IconProps = ForgeIconProps & {
25
18
  * <Icon as={ArrowRight} className="text-red-500 size-4" />
26
19
  * ```
27
20
  *
28
- * @param {ForgeIcon | BrandIcon} as - The Forge (or brand) icon component to render.
21
+ * @param {ForgeIcon} as - The Forge icon component to render.
29
22
  * @param {string} className - Utility classes to style the icon using Uniwind.
30
23
  * @param {number} size - Icon size (overrides the size class).
31
24
  * @param {...ForgeIconProps} ...props - Additional icon props passed to the "as" icon.
package/lib/typescript/components/Icon/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1E,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,EAAE,EAAE,SAAS,GAAG,SAAS,CAAC;CAC3B,CAAC;AAwBF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAQzE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,SAAS,CAAC;CACf,CAAC;AAwBF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAQzE"}
package/lib/typescript/components/Tabs/styles.d.ts CHANGED
@@ -4,10 +4,10 @@ export type TabsVariant = 'outline' | 'solid';
4
4
  export declare const OUTLINE_INDICATOR_THICKNESS = 2;
5
5
  /**
6
6
  * Shared duration (ms) for the indicator's `withTiming` glide (`index.tsx`) and the tab's
7
- * `duration-300` transition class (below) — kept in sync so the focus ring doesn't snap in
7
+ * `duration-150` transition class (below) — kept in sync so the focus ring doesn't snap in
8
8
  * ahead of a still-sliding solid/outline indicator. Change both together.
9
9
  */
10
- export declare const TABS_INDICATOR_TRANSITION_MS = 300;
10
+ export declare const TABS_INDICATOR_TRANSITION_MS = 150;
11
11
  /** Outline horizontal scroll — narrow fade reads cleanly against the page background. */
12
12
  export declare const TABS_SCROLL_FADE_SIZE = 32;
13
13
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdx-ui/components",
3
- "version": "0.0.1-beta.136",
3
+ "version": "0.0.1-beta.138",
4
4
  "license": "MIT",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -77,9 +77,9 @@
77
77
  "class-variance-authority": "^0.7.1",
78
78
  "react-native-reanimated-carousel": "5.0.0-beta.5",
79
79
  "uniwind": "1.10.0",
80
- "@cdx-ui/primitives": "0.0.1-beta.136",
81
- "@cdx-ui/utils": "0.0.1-beta.136",
82
- "@cdx-ui/icons": "0.0.1-beta.136"
80
+ "@cdx-ui/primitives": "0.0.1-beta.138",
81
+ "@cdx-ui/utils": "0.0.1-beta.138",
82
+ "@cdx-ui/icons": "0.0.1-beta.138"
83
83
  },
84
84
  "devDependencies": {
85
85
  "@react-navigation/bottom-tabs": "*",
package/src/components/Icon/index.tsx CHANGED
@@ -1,17 +1,10 @@
1
1
  import { withUniwind } from 'uniwind';
2
2
  import { cn } from '@cdx-ui/utils';
3
- import type { ForgeIcon, ForgeIconProps, BrandIcon } from '@cdx-ui/icons';
3
+ import type { ForgeIcon, ForgeIconProps } from '@cdx-ui/icons';
4
4
 
5
5
  export type IconProps = ForgeIconProps & {
6
6
  className?: string; // TODO: Why does this need to specified manually?
7
- /**
8
- * The icon component to render. Accepts `BrandIcon` components (e.g. `WhatsApp`
9
- * from `@cdx-ui/icons`) in addition to themeable `ForgeIcon`s — the `size`
10
- * portion of `className` still applies, but brand icons ignore `color`/`filled`
11
- * (they are permanently fixed-color and non-themeable; see
12
- * docs/internal/research/brand-icons-direction-summary.md).
13
- */
14
- as: ForgeIcon | BrandIcon;
7
+ as: ForgeIcon;
15
8
  };
16
9
 
17
10
  function IconImpl({ as: IconComponent, ...props }: IconProps) {
@@ -51,7 +44,7 @@ const StyledIcon = withUniwind(withUniwind(IconImpl), {
51
44
  * <Icon as={ArrowRight} className="text-red-500 size-4" />
52
45
  * ```
53
46
  *
54
- * @param {ForgeIcon | BrandIcon} as - The Forge (or brand) icon component to render.
47
+ * @param {ForgeIcon} as - The Forge icon component to render.
55
48
  * @param {string} className - Utility classes to style the icon using Uniwind.
56
49
  * @param {number} size - Icon size (overrides the size class).
57
50
  * @param {...ForgeIconProps} ...props - Additional icon props passed to the "as" icon.
package/src/components/Tabs/styles.ts CHANGED
@@ -32,10 +32,10 @@ export const OUTLINE_INDICATOR_THICKNESS = 2;
32
32
 
33
33
  /**
34
34
  * Shared duration (ms) for the indicator's `withTiming` glide (`index.tsx`) and the tab's
35
- * `duration-300` transition class (below) — kept in sync so the focus ring doesn't snap in
35
+ * `duration-150` transition class (below) — kept in sync so the focus ring doesn't snap in
36
36
  * ahead of a still-sliding solid/outline indicator. Change both together.
37
37
  */
38
- export const TABS_INDICATOR_TRANSITION_MS = 300;
38
+ export const TABS_INDICATOR_TRANSITION_MS = 150;
39
39
 
40
40
  /** Outline horizontal scroll — narrow fade reads cleanly against the page background. */
41
41
  export const TABS_SCROLL_FADE_SIZE = 32;
@@ -255,7 +255,7 @@ export const tabsTabVariants = cva(
255
255
  // `transition` (not `transition-colors`) — its default property list includes `box-shadow`,
256
256
  // so the focus ring eases in over `TABS_INDICATOR_TRANSITION_MS` instead of snapping in
257
257
  // ahead of the indicator, which glides over the same duration (see `index.tsx`).
258
- 'transition duration-300',
258
+ 'transition duration-150',
259
259
  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
260
260
  DISABLED_CURSOR,
261
261
  Platform.select({