@a-type/ui 0.8.25 → 0.8.27
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/cjs/components/icon/generated/IconSpritesheet.js +1 -1
- package/dist/cjs/components/icon/generated/IconSpritesheet.js.map +1 -1
- package/dist/cjs/components/icon/generated/iconNames.d.ts +1 -1
- package/dist/cjs/components/icon/generated/iconNames.js +1 -0
- package/dist/cjs/components/icon/generated/iconNames.js.map +1 -1
- package/dist/cjs/components/input/Input.d.ts +1 -0
- package/dist/cjs/components/input/Input.js +3 -5
- package/dist/cjs/components/input/Input.js.map +1 -1
- package/dist/cjs/components/navBar/NavBar.js +2 -2
- package/dist/cjs/components/navBar/NavBar.js.map +1 -1
- package/dist/cjs/components/tabs/tabs.d.ts +10 -11
- package/dist/cjs/components/tabs/tabs.js +54 -3
- package/dist/cjs/components/tabs/tabs.js.map +1 -1
- package/dist/cjs/components/tabs/tabs.stories.js +5 -1
- package/dist/cjs/components/tabs/tabs.stories.js.map +1 -1
- package/dist/cjs/components/textArea/TextArea.js +1 -1
- package/dist/cjs/components/textArea/TextArea.js.map +1 -1
- package/dist/cjs/uno.preset.d.ts +5 -1
- package/dist/cjs/uno.preset.js +8 -5
- package/dist/cjs/uno.preset.js.map +1 -1
- package/dist/css/main.css +4 -4
- package/dist/esm/components/icon/generated/IconSpritesheet.js +1 -1
- package/dist/esm/components/icon/generated/IconSpritesheet.js.map +1 -1
- package/dist/esm/components/icon/generated/iconNames.d.ts +1 -1
- package/dist/esm/components/icon/generated/iconNames.js +1 -0
- package/dist/esm/components/icon/generated/iconNames.js.map +1 -1
- package/dist/esm/components/input/Input.d.ts +1 -0
- package/dist/esm/components/input/Input.js +3 -5
- package/dist/esm/components/input/Input.js.map +1 -1
- package/dist/esm/components/navBar/NavBar.js +2 -2
- package/dist/esm/components/navBar/NavBar.js.map +1 -1
- package/dist/esm/components/tabs/tabs.d.ts +10 -11
- package/dist/esm/components/tabs/tabs.js +48 -3
- package/dist/esm/components/tabs/tabs.js.map +1 -1
- package/dist/esm/components/tabs/tabs.stories.js +5 -1
- package/dist/esm/components/tabs/tabs.stories.js.map +1 -1
- package/dist/esm/components/textArea/TextArea.js +1 -1
- package/dist/esm/components/textArea/TextArea.js.map +1 -1
- package/dist/esm/uno.preset.d.ts +5 -1
- package/dist/esm/uno.preset.js +8 -5
- package/dist/esm/uno.preset.js.map +1 -1
- package/package.json +1 -1
- package/src/components/icon/generated/IconSpritesheet.tsx +11 -6
- package/src/components/icon/generated/iconNames.ts +1 -0
- package/src/components/input/Input.tsx +4 -9
- package/src/components/navBar/NavBar.tsx +2 -2
- package/src/components/tabs/tabs.stories.tsx +22 -18
- package/src/components/tabs/tabs.tsx +99 -6
- package/src/components/textArea/TextArea.tsx +1 -0
- package/src/uno.preset.ts +13 -5
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
/// <reference types="react" resolution-mode="require"/>
|
|
2
1
|
import * as Tabs from '@radix-ui/react-tabs';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
export
|
|
10
|
-
|
|
11
|
-
}
|
|
2
|
+
import { RefObject } from 'react';
|
|
3
|
+
export declare const TabsRoot: (props: Tabs.TabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export interface TabsListProps extends Tabs.TabsListProps {
|
|
5
|
+
disableIndicator?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const TabsList: ({ children, disableIndicator, ...props }: TabsListProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export interface TabsTriggerProps extends Tabs.TabsTriggerProps {
|
|
9
|
+
}
|
|
10
|
+
export declare const TabsTrigger: ({ children, ...props }: TabsTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
11
|
export declare const TabsContent: import("react").FunctionComponent<Omit<Tabs.TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
13
|
-
ref?: ((instance: HTMLDivElement | null) => void) |
|
|
12
|
+
ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
|
|
14
13
|
}>;
|
|
@@ -1,8 +1,53 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
14
|
import * as Tabs from '@radix-ui/react-tabs';
|
|
3
15
|
import { withClassName } from '../../hooks/withClassName.js';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
16
|
+
import { createContext, useContext, useEffect, useState, } from 'react';
|
|
17
|
+
import { createPortal } from 'react-dom';
|
|
18
|
+
import clsx from 'clsx';
|
|
19
|
+
const TabsContext = createContext(null);
|
|
20
|
+
export const TabsRoot = (props) => {
|
|
21
|
+
var _a;
|
|
22
|
+
return (_jsx(TabsContext.Provider, Object.assign({ value: (_a = props.value) !== null && _a !== void 0 ? _a : null }, { children: _jsx(Tabs.Tabs, Object.assign({}, props)) })));
|
|
23
|
+
};
|
|
24
|
+
const listStructureClassName = 'flex flex-row justify-center items-start gap-2';
|
|
25
|
+
const TabsListEl = withClassName(Tabs.List, listStructureClassName, 'relative p-2');
|
|
26
|
+
const TabsListContext = createContext(null);
|
|
27
|
+
export const TabsList = (_a) => {
|
|
28
|
+
var { children, disableIndicator } = _a, props = __rest(_a, ["children", "disableIndicator"]);
|
|
29
|
+
const [layer, layerRef] = useState(null);
|
|
30
|
+
const selectedValue = useContext(TabsContext);
|
|
31
|
+
return (_jsx(TabsListContext.Provider, Object.assign({ value: layer }, { children: _jsxs(TabsListEl, Object.assign({}, props, { children: [children, !disableIndicator && !!selectedValue && (_jsx("div", { ref: layerRef, "data-purpose": "tabs-indicator-layer", "aria-hidden": true, className: clsx(listStructureClassName, 'absolute inset-2 bg-primary-light pointer-events-none',
|
|
32
|
+
// clip-path is used to clip the indicator to only the selected tab using --indicator-left and --indicator-width
|
|
33
|
+
'[clip-path:inset(0_var(--indicator-right)_0_var(--indicator-left)_round_32px)] transition-all duration-200') }))] })) })));
|
|
34
|
+
};
|
|
35
|
+
const TabsTriggerEl = withClassName(Tabs.Trigger, 'flex flex-row items-center justify-center gap-2 color-black py-1 px-4 bg-wash text-md min-w-100px rounded-full transition-colors cursor-pointer select-none border-none font-inherit', 'hover:ring-1 hover:ring-primary focus-visible:ring-2 focus-visible:ring-primary-dark focus-visible:outline-off focus-visible:bg-primary-wash');
|
|
36
|
+
export const TabsTrigger = (_a) => {
|
|
37
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
|
38
|
+
const layerRef = useContext(TabsListContext);
|
|
39
|
+
const selectedValue = useContext(TabsContext);
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
if (layerRef && selectedValue === props.value) {
|
|
42
|
+
const el = layerRef.querySelector('[data-state=active]');
|
|
43
|
+
if (el) {
|
|
44
|
+
layerRef.style.setProperty('--indicator-left', `${el.offsetLeft}px`);
|
|
45
|
+
layerRef.style.setProperty('--indicator-right', `${layerRef.offsetWidth - (el.offsetLeft + el.offsetWidth)}px`);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}, [layerRef, selectedValue, props.value]);
|
|
49
|
+
return (_jsxs(_Fragment, { children: [_jsx(TabsTriggerEl, Object.assign({}, props, { children: children })), layerRef &&
|
|
50
|
+
createPortal(_jsx(TabsTriggerEl, Object.assign({ value: props.value, className: "bg-transparent", asChild: true }, { children: _jsx("div", { children: children }) })), layerRef)] }));
|
|
51
|
+
};
|
|
7
52
|
export const TabsContent = withClassName(Tabs.Content, '');
|
|
8
53
|
//# sourceMappingURL=tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { TabsRoot, TabsList, TabsContent, TabsTrigger } from './tabs.js';
|
|
4
|
+
import { useState } from 'react';
|
|
4
5
|
const meta = {
|
|
5
6
|
title: 'Tabs',
|
|
6
7
|
argTypes: {},
|
|
@@ -10,6 +11,9 @@ const meta = {
|
|
|
10
11
|
};
|
|
11
12
|
export default meta;
|
|
12
13
|
export const Default = {
|
|
13
|
-
render: () =>
|
|
14
|
+
render: () => {
|
|
15
|
+
const [value, setValue] = useState('tab1');
|
|
16
|
+
return (_jsxs(TabsRoot, Object.assign({ value: value, onValueChange: setValue }, { children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, Object.assign({ value: "tab1" }, { children: "Tab 1" })), _jsx(TabsTrigger, Object.assign({ value: "tab2" }, { children: "Tab 2 (long)" })), _jsx(TabsTrigger, Object.assign({ value: "tab3" }, { children: "Tab 3" }))] }), _jsx(TabsContent, Object.assign({ value: "tab1" }, { children: _jsx("div", { children: "Tab 1 content" }) })), _jsx(TabsContent, Object.assign({ value: "tab2" }, { children: _jsx("div", { children: "Tab 2 content" }) })), _jsx(TabsContent, Object.assign({ value: "tab3" }, { children: _jsx("div", { children: "Tab 3 content" }) }))] })));
|
|
17
|
+
},
|
|
14
18
|
};
|
|
15
19
|
//# sourceMappingURL=tabs.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE;QACZ,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3C,OAAO,CACN,MAAC,QAAQ,kBAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,iBAC9C,MAAC,QAAQ,eACR,KAAC,WAAW,kBAAC,KAAK,EAAC,MAAM,2BAAoB,EAC7C,KAAC,WAAW,kBAAC,KAAK,EAAC,MAAM,kCAA2B,EACpD,KAAC,WAAW,kBAAC,KAAK,EAAC,MAAM,2BAAoB,IACnC,EACX,KAAC,WAAW,kBAAC,KAAK,EAAC,MAAM,gBACxB,0CAAwB,IACX,EACd,KAAC,WAAW,kBAAC,KAAK,EAAC,MAAM,gBACxB,0CAAwB,IACX,EACd,KAAC,WAAW,kBAAC,KAAK,EAAC,MAAM,gBACxB,0CAAwB,IACX,KACJ,CACX,CAAC;IACH,CAAC;CACe,CAAC"}
|
|
@@ -50,7 +50,7 @@ export const TextArea = forwardRef(function TextArea(_a, ref) {
|
|
|
50
50
|
onFocus(e);
|
|
51
51
|
}
|
|
52
52
|
}, [autoSelect, onFocus]);
|
|
53
|
-
return (_jsx("textarea", Object.assign({ ref: finalRef, className: classNames(inputClassName, 'layer-components:[font-family:inherit] layer-components:text-inherit layer-components:overflow-hidden', {
|
|
53
|
+
return (_jsx("textarea", Object.assign({ ref: finalRef, className: classNames(inputClassName, 'layer-components:[font-family:inherit] layer-components:text-inherit layer-components:overflow-hidden', 'layer-variants:rounded-20px', {
|
|
54
54
|
'layer-components:[resize:vertical]': !autoSize,
|
|
55
55
|
'layer-components:[resize:none]': autoSize,
|
|
56
56
|
}, className), rows: autoSize ? 1 : rows, onChange: handleChange, onFocus: handleFocus }, rest)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAEN,UAAU,EAEV,WAAW,EAEX,eAAe,EACf,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAW7C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CACjC,SAAS,QAAQ,CAChB,EASC,EACD,GAAG;;QAVH,EACC,QAAQ,EACR,UAAU,EACV,OAAO,EACP,SAAS,EACT,IAAI,EACJ,eAAe,GAAG,CAAC,EACnB,QAAQ,OAER,EADG,IAAI,cARR,yFASC,CADO;IAIR,MAAM,QAAQ,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,UAAU,CAAC;IAE5C,gFAAgF;IAChF,eAAe,CAAC,GAAG,EAAE;QACpB,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,OAAO,EAAE;YACZ,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE,IAAI,eAAe,EAAE;gBAC5C,OAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC/B,MAAM,UAAU,GAAG,OAAO,CAAC,YAAY,CAAC;gBACxC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC;aAC3D;SACD;IACF,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5C,MAAM,YAAY,GAAG,WAAW,CAC/B,CAAC,CAAmC,EAAE,EAAE;QACvC,aAAa,CAAE,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC,CAAC;QACvD,IAAI,QAAQ,EAAE;YACb,QAAQ,CAAC,CAAC,CAAC,CAAC;SACZ;IACF,CAAC,EACD,CAAC,QAAQ,CAAC,CACV,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC9B,CAAC,CAAwC,EAAE,EAAE;QAC5C,IAAI,UAAU,EAAE;YACf,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;SAClB;QACD,IAAI,OAAO,EAAE;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;SACX;IACF,CAAC,EACD,CAAC,UAAU,EAAE,OAAO,CAAC,CACrB,CAAC;IAEF,OAAO,CACN,iCACC,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,UAAU,CACpB,cAAc,EACd,uEAAuE,EACvE;YACC,oCAAoC,EAAE,CAAC,QAAQ;YAC/C,gCAAgC,EAAE,QAAQ;SAC1C,EACD,SAAS,CACT,EACD,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACzB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,IAChB,IAAI,EACP,CACF,CAAC;AACH,CAAC,CACD,CAAC"}
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAEN,UAAU,EAEV,WAAW,EAEX,eAAe,EACf,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAW7C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CACjC,SAAS,QAAQ,CAChB,EASC,EACD,GAAG;;QAVH,EACC,QAAQ,EACR,UAAU,EACV,OAAO,EACP,SAAS,EACT,IAAI,EACJ,eAAe,GAAG,CAAC,EACnB,QAAQ,OAER,EADG,IAAI,cARR,yFASC,CADO;IAIR,MAAM,QAAQ,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,UAAU,CAAC;IAE5C,gFAAgF;IAChF,eAAe,CAAC,GAAG,EAAE;QACpB,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,OAAO,EAAE;YACZ,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE,IAAI,eAAe,EAAE;gBAC5C,OAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC/B,MAAM,UAAU,GAAG,OAAO,CAAC,YAAY,CAAC;gBACxC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC;aAC3D;SACD;IACF,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5C,MAAM,YAAY,GAAG,WAAW,CAC/B,CAAC,CAAmC,EAAE,EAAE;QACvC,aAAa,CAAE,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC,CAAC;QACvD,IAAI,QAAQ,EAAE;YACb,QAAQ,CAAC,CAAC,CAAC,CAAC;SACZ;IACF,CAAC,EACD,CAAC,QAAQ,CAAC,CACV,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC9B,CAAC,CAAwC,EAAE,EAAE;QAC5C,IAAI,UAAU,EAAE;YACf,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;SAClB;QACD,IAAI,OAAO,EAAE;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;SACX;IACF,CAAC,EACD,CAAC,UAAU,EAAE,OAAO,CAAC,CACrB,CAAC;IAEF,OAAO,CACN,iCACC,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,UAAU,CACpB,cAAc,EACd,uEAAuE,EACvE,+BAA+B,EAC/B;YACC,oCAAoC,EAAE,CAAC,QAAQ;YAC/C,gCAAgC,EAAE,QAAQ;SAC1C,EACD,SAAS,CACT,EACD,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACzB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,IAChB,IAAI,EACP,CACF,CAAC;AACH,CAAC,CACD,CAAC"}
|
package/dist/esm/uno.preset.d.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { Preset } from 'unocss';
|
|
2
|
-
export default function presetAglio({ spacingIncrement, interFontLocation, }?: {
|
|
2
|
+
export default function presetAglio({ spacingIncrement, interFontLocation, colorRanges, }?: {
|
|
3
3
|
spacingIncrement?: number;
|
|
4
4
|
interFontLocation?: string;
|
|
5
|
+
colorRanges?: {
|
|
6
|
+
light: [number, number];
|
|
7
|
+
dark: [number, number];
|
|
8
|
+
};
|
|
5
9
|
}): Preset;
|
package/dist/esm/uno.preset.js
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { presetUno } from 'unocss';
|
|
3
3
|
import { entriesToCss, toArray } from '@unocss/core';
|
|
4
|
-
export default function presetAglio({ spacingIncrement = 0.25, interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
|
|
4
|
+
export default function presetAglio({ spacingIncrement = 0.25, interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf', colorRanges = {
|
|
5
|
+
light: [90, 40],
|
|
6
|
+
dark: [0, 60],
|
|
7
|
+
}, } = {}) {
|
|
8
|
+
const lightColors = generateColors(...colorRanges.light);
|
|
9
|
+
const darkColors = generateColors(...colorRanges.dark);
|
|
5
10
|
return {
|
|
6
11
|
name: 'atype',
|
|
7
12
|
enforce: 'post',
|
|
@@ -396,8 +401,8 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
396
401
|
--palette-green-90: #e9fff1;
|
|
397
402
|
--palette-green-80: #c2ffe1;
|
|
398
403
|
--palette-green-70: #8ff8c4;
|
|
399
|
-
--palette-green-60: #
|
|
400
|
-
--palette-green-50: #
|
|
404
|
+
--palette-green-60: #71f0a8;
|
|
405
|
+
--palette-green-50: #56d187;
|
|
401
406
|
--palette-green-40: #499d6f;
|
|
402
407
|
--palette-green-30: #1f8355;
|
|
403
408
|
--palette-green-20: #24694b;
|
|
@@ -762,8 +767,6 @@ function generateColors(from, to) {
|
|
|
762
767
|
}, {});
|
|
763
768
|
return Object.entries(map).reduce((str, [key, value]) => str + `${key}: ${value};\n`, '');
|
|
764
769
|
}
|
|
765
|
-
const lightColors = generateColors(90, 40);
|
|
766
|
-
const darkColors = generateColors(0, 60);
|
|
767
770
|
function makeSpacing(increment) {
|
|
768
771
|
return new Array(20)
|
|
769
772
|
.fill(0)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uno.preset.js","sourceRoot":"","sources":["../../src/uno.preset.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAErD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EACnC,gBAAgB,GAAG,IAAI,EACvB,iBAAiB,GAAG,wEAAwE,
|
|
1
|
+
{"version":3,"file":"uno.preset.js","sourceRoot":"","sources":["../../src/uno.preset.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -772,8 +772,8 @@ export const IconSpritesheet = (props: any) => (
|
|
|
772
772
|
<symbol id="icon-notAllowed" viewBox="0 0 15 15">
|
|
773
773
|
<g clipPath="url(#clip0_996_18)">
|
|
774
774
|
<path
|
|
775
|
-
d="
|
|
776
|
-
|
|
775
|
+
d="M12.2141 2.78594L2.786 12.214M14.1667 7.49998C14.1667 11.1819 11.1819 14.1666 7.50004 14.1666C3.81814 14.1666 0.833374 11.1819 0.833374 7.49998C0.833374 3.81808 3.81814 0.833313 7.50004 0.833313C11.1819 0.833313 14.1667 3.81808 14.1667 7.49998Z"
|
|
776
|
+
stroke="currentColor"
|
|
777
777
|
/>
|
|
778
778
|
</g>
|
|
779
779
|
<defs>
|
|
@@ -783,10 +783,7 @@ export const IconSpritesheet = (props: any) => (
|
|
|
783
783
|
</defs>
|
|
784
784
|
</symbol>
|
|
785
785
|
<symbol id="icon-connection" viewBox="0 0 15 15">
|
|
786
|
-
<path
|
|
787
|
-
d="M10.6464 3.64645L3.64645 10.6464L4.35355 11.3536L11.3536 4.35355L10.6464 3.64645Z"
|
|
788
|
-
fill="currentColor"
|
|
789
|
-
/>
|
|
786
|
+
<path d="M11 4L4 11" stroke="currentColor" />
|
|
790
787
|
<circle cx="12" cy="3" r="1.5" stroke="currentColor" />
|
|
791
788
|
<circle cx="3" cy="12" r="1.5" stroke="currentColor" />
|
|
792
789
|
</symbol>
|
|
@@ -819,6 +816,14 @@ export const IconSpritesheet = (props: any) => (
|
|
|
819
816
|
<circle cx="7.5" cy="7.5" r="2" stroke="currentColor" />
|
|
820
817
|
<circle cx="3" cy="12" r="1.5" stroke="currentColor" />
|
|
821
818
|
</symbol>
|
|
819
|
+
<symbol id="icon-search" viewBox="0 0 15 15">
|
|
820
|
+
<path
|
|
821
|
+
fillRule="evenodd"
|
|
822
|
+
clipRule="evenodd"
|
|
823
|
+
d="M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z"
|
|
824
|
+
fill="currentColor"
|
|
825
|
+
/>
|
|
826
|
+
</symbol>
|
|
822
827
|
</defs>
|
|
823
828
|
</svg>
|
|
824
829
|
);
|
|
@@ -9,20 +9,21 @@ import {
|
|
|
9
9
|
import { Slot } from '@radix-ui/react-slot';
|
|
10
10
|
|
|
11
11
|
export const inputClassName = classNames(
|
|
12
|
-
'layer-components:(px-4 py-2 text-md font-sans rounded-
|
|
12
|
+
'layer-components:(px-4 py-2 text-md font-sans rounded-full bg-white select-auto min-w-60px color-black border-default shadow-sm-inset)',
|
|
13
13
|
'layer-components:focus:(outline-none bg-gray-1 ring-4 ring-white)',
|
|
14
14
|
'layer-components:focus-visible:(outline-none ring-gray-dark-blend)',
|
|
15
15
|
'layer-components:md:(min-w-120px)',
|
|
16
16
|
);
|
|
17
17
|
|
|
18
18
|
export interface InputProps extends ComponentProps<'input'> {
|
|
19
|
+
/** @deprecated */
|
|
19
20
|
variant?: 'default' | 'primary';
|
|
20
21
|
autoSelect?: boolean;
|
|
21
22
|
asChild?: boolean;
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
|
|
25
|
-
{ className, autoSelect, onFocus, variant
|
|
26
|
+
{ className, autoSelect, onFocus, variant: _, asChild, ...props },
|
|
26
27
|
ref,
|
|
27
28
|
) {
|
|
28
29
|
const handleFocus = useCallback(
|
|
@@ -41,13 +42,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
|
|
|
41
42
|
<Component
|
|
42
43
|
{...props}
|
|
43
44
|
onFocus={handleFocus}
|
|
44
|
-
className={classNames(
|
|
45
|
-
inputClassName,
|
|
46
|
-
{
|
|
47
|
-
'rounded-full': variant === 'primary',
|
|
48
|
-
},
|
|
49
|
-
className,
|
|
50
|
-
)}
|
|
45
|
+
className={classNames(inputClassName, className)}
|
|
51
46
|
ref={ref}
|
|
52
47
|
/>
|
|
53
48
|
);
|
|
@@ -10,7 +10,7 @@ export const navBarItemClass = classNames(
|
|
|
10
10
|
'layer-components:hover:bg-primary-wash',
|
|
11
11
|
'layer-components:focus-visible:(outline-none bg-primary-wash)',
|
|
12
12
|
'layer-components:active:bg-primary-wash layer-components:sm:active:bg-gray-dark-blend',
|
|
13
|
-
'layer-components:[&[data-active=true]]:(bg-primary-wash text-
|
|
13
|
+
'layer-components:[&[data-active=true]]:(bg-primary-wash text-black)',
|
|
14
14
|
);
|
|
15
15
|
|
|
16
16
|
export interface NavBarItemProps {
|
|
@@ -62,7 +62,7 @@ export const NavBarItemIcon = forwardRef<any, NavBarItemIconProps>(
|
|
|
62
62
|
<Comp
|
|
63
63
|
name={name}
|
|
64
64
|
className={clsx(
|
|
65
|
-
'layer-components:(relative z-1 flex fill-none)',
|
|
65
|
+
'layer-components:(relative z-1 flex fill-none text-primary-dark)',
|
|
66
66
|
'layer-variants:[*[data-active=true]_&]:fill-primary-light',
|
|
67
67
|
className,
|
|
68
68
|
)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import { TabsRoot, TabsList, TabsContent, TabsTrigger } from './tabs.js';
|
|
3
|
+
import { useState } from 'react';
|
|
3
4
|
|
|
4
5
|
const meta = {
|
|
5
6
|
title: 'Tabs',
|
|
@@ -14,22 +15,25 @@ export default meta;
|
|
|
14
15
|
type Story = StoryObj;
|
|
15
16
|
|
|
16
17
|
export const Default: Story = {
|
|
17
|
-
render: () =>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
18
|
+
render: () => {
|
|
19
|
+
const [value, setValue] = useState('tab1');
|
|
20
|
+
return (
|
|
21
|
+
<TabsRoot value={value} onValueChange={setValue}>
|
|
22
|
+
<TabsList>
|
|
23
|
+
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
24
|
+
<TabsTrigger value="tab2">Tab 2 (long)</TabsTrigger>
|
|
25
|
+
<TabsTrigger value="tab3">Tab 3</TabsTrigger>
|
|
26
|
+
</TabsList>
|
|
27
|
+
<TabsContent value="tab1">
|
|
28
|
+
<div>Tab 1 content</div>
|
|
29
|
+
</TabsContent>
|
|
30
|
+
<TabsContent value="tab2">
|
|
31
|
+
<div>Tab 2 content</div>
|
|
32
|
+
</TabsContent>
|
|
33
|
+
<TabsContent value="tab3">
|
|
34
|
+
<div>Tab 3 content</div>
|
|
35
|
+
</TabsContent>
|
|
36
|
+
</TabsRoot>
|
|
37
|
+
);
|
|
38
|
+
},
|
|
35
39
|
} satisfies Story;
|
|
@@ -1,17 +1,110 @@
|
|
|
1
1
|
import * as Tabs from '@radix-ui/react-tabs';
|
|
2
2
|
import { withClassName } from '../../hooks/withClassName.js';
|
|
3
|
+
import {
|
|
4
|
+
createContext,
|
|
5
|
+
createRef,
|
|
6
|
+
RefObject,
|
|
7
|
+
useContext,
|
|
8
|
+
useEffect,
|
|
9
|
+
useRef,
|
|
10
|
+
useState,
|
|
11
|
+
} from 'react';
|
|
12
|
+
import { createPortal } from 'react-dom';
|
|
13
|
+
import { animated, useSpring } from '@react-spring/web';
|
|
14
|
+
import clsx from 'clsx';
|
|
3
15
|
|
|
4
|
-
|
|
16
|
+
const TabsContext = createContext<string | null>(null);
|
|
5
17
|
|
|
6
|
-
export const
|
|
18
|
+
export const TabsRoot = (props: Tabs.TabsProps) => {
|
|
19
|
+
return (
|
|
20
|
+
<TabsContext.Provider value={props.value ?? null}>
|
|
21
|
+
<Tabs.Tabs {...props} />
|
|
22
|
+
</TabsContext.Provider>
|
|
23
|
+
);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const listStructureClassName = 'flex flex-row justify-center items-start gap-2';
|
|
27
|
+
|
|
28
|
+
const TabsListEl = withClassName(
|
|
7
29
|
Tabs.List,
|
|
8
|
-
|
|
30
|
+
listStructureClassName,
|
|
31
|
+
'relative p-2',
|
|
9
32
|
);
|
|
10
33
|
|
|
11
|
-
|
|
34
|
+
const TabsListContext = createContext<HTMLDivElement | null>(null);
|
|
35
|
+
|
|
36
|
+
export interface TabsListProps extends Tabs.TabsListProps {
|
|
37
|
+
disableIndicator?: boolean;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export const TabsList = ({
|
|
41
|
+
children,
|
|
42
|
+
disableIndicator,
|
|
43
|
+
...props
|
|
44
|
+
}: TabsListProps) => {
|
|
45
|
+
const [layer, layerRef] = useState<HTMLDivElement | null>(null);
|
|
46
|
+
const selectedValue = useContext(TabsContext);
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<TabsListContext.Provider value={layer}>
|
|
50
|
+
<TabsListEl {...props}>
|
|
51
|
+
{children}
|
|
52
|
+
{!disableIndicator && !!selectedValue && (
|
|
53
|
+
<div
|
|
54
|
+
ref={layerRef}
|
|
55
|
+
data-purpose="tabs-indicator-layer"
|
|
56
|
+
aria-hidden
|
|
57
|
+
className={clsx(
|
|
58
|
+
listStructureClassName,
|
|
59
|
+
'absolute inset-2 bg-primary-light pointer-events-none',
|
|
60
|
+
// clip-path is used to clip the indicator to only the selected tab using --indicator-left and --indicator-width
|
|
61
|
+
'[clip-path:inset(0_var(--indicator-right)_0_var(--indicator-left)_round_32px)] transition-all duration-200',
|
|
62
|
+
)}
|
|
63
|
+
/>
|
|
64
|
+
)}
|
|
65
|
+
</TabsListEl>
|
|
66
|
+
</TabsListContext.Provider>
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
const TabsTriggerEl = withClassName(
|
|
12
71
|
Tabs.Trigger,
|
|
13
|
-
'flex flex-row items-center justify-center gap-2 color-black py-1 px-4 bg-wash text-md min-w-100px rounded-full
|
|
14
|
-
'hover:
|
|
72
|
+
'flex flex-row items-center justify-center gap-2 color-black py-1 px-4 bg-wash text-md min-w-100px rounded-full transition-colors cursor-pointer select-none border-none font-inherit',
|
|
73
|
+
'hover:(ring-1 ring-primary) focus-visible:(ring-2 ring-primary-dark outline-off bg-primary-wash)',
|
|
74
|
+
// '[&[data-state=active]]:(font-bold bg-primary-light border-primary-light text-black cursor-default hover:bg-primary-light relative z-1)',
|
|
15
75
|
);
|
|
16
76
|
|
|
77
|
+
export interface TabsTriggerProps extends Tabs.TabsTriggerProps {}
|
|
78
|
+
|
|
79
|
+
export const TabsTrigger = ({ children, ...props }: TabsTriggerProps) => {
|
|
80
|
+
const layerRef = useContext(TabsListContext);
|
|
81
|
+
const selectedValue = useContext(TabsContext);
|
|
82
|
+
|
|
83
|
+
useEffect(() => {
|
|
84
|
+
if (layerRef && selectedValue === props.value) {
|
|
85
|
+
const el = layerRef.querySelector('[data-state=active]') as HTMLElement;
|
|
86
|
+
if (el) {
|
|
87
|
+
layerRef.style.setProperty('--indicator-left', `${el.offsetLeft}px`);
|
|
88
|
+
layerRef.style.setProperty(
|
|
89
|
+
'--indicator-right',
|
|
90
|
+
`${layerRef.offsetWidth - (el.offsetLeft + el.offsetWidth)}px`,
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}, [layerRef, selectedValue, props.value]);
|
|
95
|
+
|
|
96
|
+
return (
|
|
97
|
+
<>
|
|
98
|
+
<TabsTriggerEl {...props}>{children}</TabsTriggerEl>
|
|
99
|
+
{layerRef &&
|
|
100
|
+
createPortal(
|
|
101
|
+
<TabsTriggerEl value={props.value} className="bg-transparent" asChild>
|
|
102
|
+
<div>{children}</div>
|
|
103
|
+
</TabsTriggerEl>,
|
|
104
|
+
layerRef,
|
|
105
|
+
)}
|
|
106
|
+
</>
|
|
107
|
+
);
|
|
108
|
+
};
|
|
109
|
+
|
|
17
110
|
export const TabsContent = withClassName(Tabs.Content, '');
|
|
@@ -84,6 +84,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
|
|
84
84
|
className={classNames(
|
|
85
85
|
inputClassName,
|
|
86
86
|
'layer-components:([font-family:inherit] text-inherit overflow-hidden)',
|
|
87
|
+
'layer-variants:(rounded-20px)',
|
|
87
88
|
{
|
|
88
89
|
'layer-components:[resize:vertical]': !autoSize,
|
|
89
90
|
'layer-components:[resize:none]': autoSize,
|
package/src/uno.preset.ts
CHANGED
|
@@ -4,10 +4,21 @@ import { entriesToCss, toArray } from '@unocss/core';
|
|
|
4
4
|
export default function presetAglio({
|
|
5
5
|
spacingIncrement = 0.25,
|
|
6
6
|
interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
|
|
7
|
+
colorRanges = {
|
|
8
|
+
light: [90, 40],
|
|
9
|
+
dark: [0, 60],
|
|
10
|
+
},
|
|
7
11
|
}: {
|
|
8
12
|
spacingIncrement?: number;
|
|
9
13
|
interFontLocation?: string;
|
|
14
|
+
colorRanges?: {
|
|
15
|
+
light: [number, number];
|
|
16
|
+
dark: [number, number];
|
|
17
|
+
};
|
|
10
18
|
} = {}): Preset {
|
|
19
|
+
const lightColors = generateColors(...colorRanges.light);
|
|
20
|
+
const darkColors = generateColors(...colorRanges.dark);
|
|
21
|
+
|
|
11
22
|
return {
|
|
12
23
|
name: 'atype',
|
|
13
24
|
enforce: 'post',
|
|
@@ -423,8 +434,8 @@ export default function presetAglio({
|
|
|
423
434
|
--palette-green-90: #e9fff1;
|
|
424
435
|
--palette-green-80: #c2ffe1;
|
|
425
436
|
--palette-green-70: #8ff8c4;
|
|
426
|
-
--palette-green-60: #
|
|
427
|
-
--palette-green-50: #
|
|
437
|
+
--palette-green-60: #71f0a8;
|
|
438
|
+
--palette-green-50: #56d187;
|
|
428
439
|
--palette-green-40: #499d6f;
|
|
429
440
|
--palette-green-30: #1f8355;
|
|
430
441
|
--palette-green-20: #24694b;
|
|
@@ -806,9 +817,6 @@ function generateColors(from: number, to: number) {
|
|
|
806
817
|
);
|
|
807
818
|
}
|
|
808
819
|
|
|
809
|
-
const lightColors = generateColors(90, 40);
|
|
810
|
-
const darkColors = generateColors(0, 60);
|
|
811
|
-
|
|
812
820
|
function makeSpacing(increment: number) {
|
|
813
821
|
return new Array(20)
|
|
814
822
|
.fill(0)
|