@cladd-ui/react 0.0.44 → 0.0.45
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/CHANGELOG.md +6 -0
- package/components/FocusableLayer.d.ts.map +1 -1
- package/components/FocusableLayer.js +1 -0
- package/components/FocusableLayer.js.map +1 -1
- package/components/Link.d.ts +5 -2
- package/components/Link.d.ts.map +1 -1
- package/components/Link.js +5 -4
- package/components/Link.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusableLayer.d.ts","sourceRoot":"","sources":["../../../src/components/FocusableLayer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,GAAI,OAAO;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,
|
|
1
|
+
{"version":3,"file":"FocusableLayer.d.ts","sourceRoot":"","sources":["../../../src/components/FocusableLayer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,GAAI,OAAO;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAkCA,CAAC"}
|
|
@@ -5,6 +5,7 @@ export const FocusableLayer = (props) => {
|
|
|
5
5
|
const accentColor = useAccentColor();
|
|
6
6
|
const { className, group, color = accentColor, force } = props;
|
|
7
7
|
const groupClasses = {
|
|
8
|
+
link: 'group-focus-visible/cladd-link:scale-100 group-focus-visible/cladd-link:opacity-100',
|
|
8
9
|
button: 'group-focus-visible/cladd-button:scale-100 group-focus-visible/cladd-button:opacity-100',
|
|
9
10
|
input: 'group-has-[input:focus]/cladd-input:scale-100 group-has-[input:focus]/cladd-input:opacity-100',
|
|
10
11
|
textarea: 'group-has-[[contenteditable]:focus]/cladd-textarea:scale-100 group-has-[[contenteditable]:focus]/cladd-textarea:opacity-100',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusableLayer.js","sourceRoot":"","sources":["../../../src/components/FocusableLayer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAGlC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAsB9B,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,YAAY,GAChB;QACE,MAAM,EACJ,yFAAyF;QAC3F,KAAK,EACH,+FAA+F;QACjG,QAAQ,EACN,6HAA6H;QAC/H,QAAQ,EACN,qHAAqH;QACvH,MAAM,EACJ,iHAAiH;QACnH,KAAK,EACH,+GAA+G;QACjH,MAAM,EACJ,iHAAiH;KACpH,CAAC,KAAqC,CAAC,IAAI,EAAE,CAAC;IACjD,OAAO,CACL,4BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,2GAA2G,EAC3G,eAAe,KAAK,EAAE,EAEtB,KAAK,IAAI,uBAAuB,EAChC,CAAC,KAAK,IAAI,YAAY,EACtB,SAAS,CACV,GACD,CACH,CAAC;AACJ,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"FocusableLayer.js","sourceRoot":"","sources":["../../../src/components/FocusableLayer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAGlC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAsB9B,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,YAAY,GAChB;QACE,IAAI,EAAE,qFAAqF;QAC3F,MAAM,EACJ,yFAAyF;QAC3F,KAAK,EACH,+FAA+F;QACjG,QAAQ,EACN,6HAA6H;QAC/H,QAAQ,EACN,qHAAqH;QACvH,MAAM,EACJ,iHAAiH;QACnH,KAAK,EACH,+GAA+G;QACjH,MAAM,EACJ,iHAAiH;KACpH,CAAC,KAAqC,CAAC,IAAI,EAAE,CAAC;IACjD,OAAO,CACL,4BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,2GAA2G,EAC3G,eAAe,KAAK,EAAE,EAEtB,KAAK,IAAI,uBAAuB,EAChC,CAAC,KAAK,IAAI,YAAY,EACtB,SAAS,CACV,GACD,CACH,CAAC;AACJ,CAAC,CAAC"}
|
package/components/Link.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { ElementType, Ref, ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
import { Color } from '../types.js';
|
|
2
3
|
interface LinkOwnProps<C extends ElementType = 'button'> {
|
|
4
|
+
/** Accent color token */
|
|
5
|
+
color?: Color;
|
|
3
6
|
/** Link content. */
|
|
4
7
|
children?: ReactNode;
|
|
5
8
|
/** Extra classes for the link element. */
|
|
@@ -12,7 +15,7 @@ interface LinkOwnProps<C extends ElementType = 'button'> {
|
|
|
12
15
|
* Polymorphic element. When omitted, defaults to `'a'` if `href` is provided, otherwise `'button'`. Pass an explicit value to override (e.g. a router `Link` component).
|
|
13
16
|
*/
|
|
14
17
|
as?: C;
|
|
15
|
-
/**
|
|
18
|
+
/** Renders a `FocusableLayer` ring on keyboard focus. Defaults to `true`. */
|
|
16
19
|
focusable?: boolean;
|
|
17
20
|
/** Click handler. */
|
|
18
21
|
onClick?: () => void;
|
|
@@ -22,6 +25,6 @@ interface LinkOwnProps<C extends ElementType = 'button'> {
|
|
|
22
25
|
ref?: Ref<HTMLElement>;
|
|
23
26
|
}
|
|
24
27
|
export type LinkProps<C extends ElementType = 'button'> = LinkOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof LinkOwnProps<C>>;
|
|
25
|
-
export declare const Link: <C extends ElementType = "button">({ children, className, disabled, readOnly, as, focusable, onClick, href, ref, ...rest }: LinkProps<C>) => import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare const Link: <C extends ElementType = "button">({ children, className, disabled, readOnly, as, color, focusable, onClick, href, ref, ...rest }: LinkProps<C>) => import("react/jsx-runtime").JSX.Element;
|
|
26
29
|
export {};
|
|
27
30
|
//# sourceMappingURL=Link.d.ts.map
|
package/components/Link.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,GAAG,EACH,wBAAwB,EACxB,SAAS,EACV,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,GAAG,EACH,wBAAwB,EACxB,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,UAAU,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ;IACrD,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gGAAgG;IAChG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,gGAYpD,SAAS,CAAC,CAAC,CAAC,4CAoCd,CAAC"}
|
package/components/Link.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, } from 'react';
|
|
3
3
|
import { cn } from '../shared/cn.js';
|
|
4
|
-
|
|
4
|
+
import { FocusableLayer } from './FocusableLayer.js';
|
|
5
|
+
export const Link = ({ children, className = '', disabled = false, readOnly = false, as, color, focusable = true, onClick, href, ref, ...rest }) => {
|
|
5
6
|
const elRef = useRef(null);
|
|
6
7
|
const Component = (typeof as === 'undefined' ? (typeof href === 'string' ? 'a' : 'button') : as);
|
|
7
|
-
return (
|
|
8
|
+
return (_jsxs(Component, { ref: (el) => {
|
|
8
9
|
elRef.current = el;
|
|
9
10
|
if (ref && typeof ref === 'function') {
|
|
10
11
|
ref(el);
|
|
@@ -12,6 +13,6 @@ export const Link = ({ children, className = '', disabled = false, readOnly = fa
|
|
|
12
13
|
else if (ref) {
|
|
13
14
|
ref.current = el;
|
|
14
15
|
}
|
|
15
|
-
}, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn('group/cladd-link cladd-link relative cursor-pointer appearance-none duration-200 select-none focus:ring-0 focus:outline-0 active:opacity-50 active:duration-0', className), readOnly: readOnly, disabled: disabled, onClick: onClick, href: href, ...rest, children: children }));
|
|
16
|
+
}, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn('group/cladd-link cladd-link relative cursor-pointer appearance-none text-cladd-xs outline-0 duration-200 select-none focus:ring-0 focus:outline-0 active:opacity-50 active:duration-0', color && `cladd-color-${color} text-cladd-primary`, className), readOnly: readOnly, disabled: disabled, onClick: onClick, href: href, ...rest, children: [children, focusable && (_jsx(FocusableLayer, { group: "link", color: color, className: "rounded-cladd" }))] }));
|
|
16
17
|
};
|
|
17
18
|
//# sourceMappingURL=Link.js.map
|
package/components/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,GAKP,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,GAKP,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA8BlD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAmC,EACrD,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,EAAE,EACF,KAAK,EACL,SAAS,GAAG,IAAI,EAChB,OAAO,EACP,IAAI,EACJ,GAAG,EACH,GAAG,IAAI,EACM,EAAE,EAAE;IACjB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,CAChB,OAAO,EAAE,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAC9D,CAAC;IAEjB,OAAO,CACL,MAAC,SAAS,IACR,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;YACf,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;YACnB,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBACrC,GAAG,CAAC,EAAE,CAAC,CAAC;YACV,CAAC;iBAAM,IAAI,GAAG,EAAE,CAAC;gBACf,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;YACnB,CAAC;QACH,CAAC,mBACc,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,EACpC,SAAS,EAAE,EAAE,CACX,uLAAuL,EACvL,KAAK,IAAI,eAAe,KAAK,qBAAqB,EAClD,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,KACN,IAAI,aAEP,QAAQ,EACR,SAAS,IAAI,CACZ,KAAC,cAAc,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,eAAe,GAAG,CACxE,IACS,CACb,CAAC;AACJ,CAAC,CAAC"}
|