@a-type/ui 2.1.2 → 2.1.4
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/colorMode/ColorModeToggle.d.ts +4 -0
- package/dist/cjs/components/colorMode/ColorModeToggle.js +34 -0
- package/dist/cjs/components/colorMode/ColorModeToggle.js.map +1 -0
- package/dist/cjs/components/colorMode/ColorModeToggle.stories.d.ts +15 -0
- package/dist/cjs/components/colorMode/ColorModeToggle.stories.js +16 -0
- package/dist/cjs/components/colorMode/ColorModeToggle.stories.js.map +1 -0
- 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 +3 -0
- package/dist/cjs/components/icon/generated/iconNames.js.map +1 -1
- package/dist/cjs/components/index.d.ts +1 -0
- package/dist/cjs/components/index.js +1 -0
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/cjs/components/toggleGroup/toggleGroup.js +2 -2
- package/dist/cjs/components/toggleGroup/toggleGroup.js.map +1 -1
- package/dist/cjs/hooks/useStorage.js +14 -2
- package/dist/cjs/hooks/useStorage.js.map +1 -1
- package/dist/css/main.css +2 -2
- package/dist/esm/components/colorMode/ColorModeToggle.d.ts +4 -0
- package/dist/esm/components/colorMode/ColorModeToggle.js +31 -0
- package/dist/esm/components/colorMode/ColorModeToggle.js.map +1 -0
- package/dist/esm/components/colorMode/ColorModeToggle.stories.d.ts +15 -0
- package/dist/esm/components/colorMode/ColorModeToggle.stories.js +13 -0
- package/dist/esm/components/colorMode/ColorModeToggle.stories.js.map +1 -0
- 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 +3 -0
- package/dist/esm/components/icon/generated/iconNames.js.map +1 -1
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/components/toggleGroup/toggleGroup.js +2 -2
- package/dist/esm/components/toggleGroup/toggleGroup.js.map +1 -1
- package/dist/esm/hooks/useStorage.js +14 -2
- package/dist/esm/hooks/useStorage.js.map +1 -1
- package/package.json +1 -1
- package/src/components/colorMode/ColorModeToggle.stories.tsx +17 -0
- package/src/components/colorMode/ColorModeToggle.tsx +44 -0
- package/src/components/icon/generated/IconSpritesheet.tsx +41 -0
- package/src/components/icon/generated/iconNames.ts +3 -0
- package/src/components/index.ts +1 -0
- package/src/components/toggleGroup/toggleGroup.tsx +4 -2
- package/src/hooks/useStorage.ts +15 -2
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
|
|
2
|
+
export interface ColorModeToggleProps extends Omit<ToggleGroupSingleProps, 'type'> {
|
|
3
|
+
}
|
|
4
|
+
export declare function ColorModeToggle({ value: userValue, onValueChange: userOnValueChange, className, ...rest }: ColorModeToggleProps): import("react/jsx-runtime.js").JSX.Element;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
"use strict";
|
|
3
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
8
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
9
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
10
|
+
t[p[i]] = s[p[i]];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
+
exports.ColorModeToggle = ColorModeToggle;
|
|
16
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
|
+
const colorMode_js_1 = require("../../colorMode.js");
|
|
18
|
+
const Icon_js_1 = require("../icon/Icon.js");
|
|
19
|
+
const toggleGroup_js_1 = require("../toggleGroup/toggleGroup.js");
|
|
20
|
+
function ColorModeToggle(_a) {
|
|
21
|
+
var { value: userValue, onValueChange: userOnValueChange, className } = _a, rest = __rest(_a, ["value", "onValueChange", "className"]);
|
|
22
|
+
const colorMode = (0, colorMode_js_1.useColorMode)();
|
|
23
|
+
const value = userValue !== null && userValue !== void 0 ? userValue : colorMode;
|
|
24
|
+
const onValueChange = (value) => {
|
|
25
|
+
if (userOnValueChange) {
|
|
26
|
+
userOnValueChange(value);
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
(0, colorMode_js_1.setColorMode)(value);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)(toggleGroup_js_1.ToggleGroup, Object.assign({ value: value, onValueChange: onValueChange, type: "single", className: className }, rest, { children: [(0, jsx_runtime_1.jsx)(toggleGroup_js_1.ToggleGroup.Item, { value: "system", "aria-label": "Device", children: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "phone" }) }), (0, jsx_runtime_1.jsx)(toggleGroup_js_1.ToggleGroup.Item, { value: "light", "aria-label": "Light", children: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "sun" }) }), (0, jsx_runtime_1.jsx)(toggleGroup_js_1.ToggleGroup.Item, { value: "dark", "aria-label": "Dark", children: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "moon" }) })] })));
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=ColorModeToggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorModeToggle.js","sourceRoot":"","sources":["../../../../src/components/colorMode/ColorModeToggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAQA,0CAmCC;;AA1CD,qDAAgE;AAChE,6CAAuC;AACvC,kEAA4D;AAK5D,SAAgB,eAAe,CAAC,EAKT;QALS,EAC/B,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,iBAAiB,EAChC,SAAS,OAEa,EADnB,IAAI,cAJwB,uCAK/B,CADO;IAEP,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IACjC,MAAM,KAAK,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,SAAS,CAAC;IACrC,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE;QACvC,IAAI,iBAAiB,EAAE,CAAC;YACvB,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACP,IAAA,2BAAY,EAAC,KAAoC,CAAC,CAAC;QACpD,CAAC;IACF,CAAC,CAAC;IAEF,OAAO,CACN,wBAAC,4BAAW,kBACX,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,IAChB,IAAI,eAER,uBAAC,4BAAW,CAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,gBAAY,QAAQ,YACnD,uBAAC,cAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACH,EACnB,uBAAC,4BAAW,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,gBAAY,OAAO,YACjD,uBAAC,cAAI,IAAC,IAAI,EAAC,KAAK,GAAG,GACD,EACnB,uBAAC,4BAAW,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,gBAAY,MAAM,YAC/C,uBAAC,cAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACF,KACN,CACd,CAAC;AACH,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { ColorModeToggle } from './ColorModeToggle.js';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof ColorModeToggle;
|
|
6
|
+
argTypes: {};
|
|
7
|
+
parameters: {
|
|
8
|
+
controls: {
|
|
9
|
+
expanded: boolean;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
type Story = StoryObj<typeof ColorModeToggle>;
|
|
15
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Default = void 0;
|
|
5
|
+
const ColorModeToggle_js_1 = require("./ColorModeToggle.js");
|
|
6
|
+
const meta = {
|
|
7
|
+
title: 'ColorModeToggle',
|
|
8
|
+
component: ColorModeToggle_js_1.ColorModeToggle,
|
|
9
|
+
argTypes: {},
|
|
10
|
+
parameters: {
|
|
11
|
+
controls: { expanded: true },
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
exports.default = meta;
|
|
15
|
+
exports.Default = {};
|
|
16
|
+
//# sourceMappingURL=ColorModeToggle.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorModeToggle.stories.js","sourceRoot":"","sources":["../../../../src/components/colorMode/ColorModeToggle.stories.tsx"],"names":[],"mappings":";;;AACA,6DAAuD;AAEvD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,oCAAe;IAC1B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACsC,CAAC;AAEzC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU,EAAE,CAAC"}
|