@a-type/ui 2.7.6 → 2.8.0

package/dist/esm/components/slider/Slider.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { Slider } from './Slider.js';
 const meta = {
     title: 'Components/Slider',

package/dist/esm/components/slider/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './Slider.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/spinner/Spinner.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/dist/esm/components/spinner/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './Spinner.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/switch/Switch.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/dist/esm/components/switch/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './Switch.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/tabs/tabs.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -16,16 +15,16 @@ import clsx from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
 export const TabsRoot = withClassName(TabsPrimitive.Root, '');
 export const TabsList = withClassName(TabsPrimitive.List, 'flex flex-row flex-wrap py-2 px-2 items-start gap-2');
-export const TabsTriggerBase = withClassName(TabsPrimitive.Trigger, 'layer-components:flex layer-components:flex-row layer-components:items-center layer-components:cursor-pointer layer-components:justify-center layer-components:gap-2 layer-components:color-black layer-components:py-1 layer-components:px-5 layer-components:bg-wash layer-components:text-md layer-components:min-w-100px layer-components:rounded-lg layer-components:border-default layer-components:font-semibold layer-components:color-gray-ink layer-components:border-gray-dark layer-components:transition-all layer-components:cursor-pointer layer-components:select-none layer-components:font-inherit layer-components:flex-shrink-0 layer-components:shadow-sm', 'layer-components:hover:bg-darken-1 layer-components:hover:ring-4 layer-components:hover:ring-bg', 'layer-components:focus-visible:bg-darken-1 layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-bg layer-components:focus-visible:outline-off', '[&[data-state=active]]:bg-[var(--bg)] [&[data-state=active]]:font-semibold [&[data-state=active]]:color-black [&[data-state=active]]:cursor-default [&[data-state=active]]:hover:bg-darken-1 [&[data-state=active]]:relative [&[data-state=active]]:z-1');
+export const TabsTriggerBase = withClassName(TabsPrimitive.Trigger, 'layer-components:(flex flex-row items-center cursor-pointer justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold color-gray-ink border-gray-dark transition-all cursor-pointer select-none font-inherit flex-shrink-0 shadow-sm)', 'layer-components:hover:(bg-darken-1 ring-4 ring-bg)', 'layer-components:focus-visible:(bg-darken-1 ring-4 ring-bg outline-off)', '[&[data-state=active]]:(bg-[var(--bg)] font-semibold color-black cursor-default hover:bg-darken-1 relative z-1)');
 const colorClasses = {
-    default: 'layer-variants:[--bg:var(--color-white)]',
-    primary: 'layer-variants:[--bg:var(--color-primary)]',
+    default: 'layer-variants:([--bg:var(--color-white)])',
+    primary: 'layer-variants:([--bg:var(--color-primary)])',
 };
 export const TabsTrigger = (_a) => {
     var { className, color = 'primary' } = _a, props = __rest(_a, ["className", "color"]);
     return (_jsx(TabsTriggerBase, Object.assign({ className: clsx(colorClasses[color], `btn-color-${color}`, className) }, props)));
 };
-export const TabsContent = withClassName(TabsPrimitive.Content, 'layer-components:focus:outline-none layer-components:focus-visible:outline-none layer-components:focus-visible:ring-inset layer-components:focus-visible:ring-2 layer-components:focus-visible:ring-gray');
+export const TabsContent = withClassName(TabsPrimitive.Content, 'layer-components:(focus:outline-none focus-visible:(outline-none ring-inset ring-2 ring-gray))');
 export const Tabs = Object.assign(TabsRoot, {
     List: TabsList,
     Trigger: TabsTrigger,

package/dist/esm/components/tabs/tabs.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from './tabs.js';

package/dist/esm/components/textArea/TextArea.js

@@ -1,4 +1,3 @@
-// @unocss-include
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -55,7 +54,7 @@ export const TextArea = function TextArea(_a) {
         }
     }, [autoSelect, onFocus]);
     const randomPlaceholder = useRotatingShuffledValue(placeholders !== null && placeholders !== void 0 ? placeholders : [], placeholdersIntervalMs);
-    return (_jsx("textarea", Object.assign({ ref: finalRef, className: classNames(inputClassName, 'layer-components:[font-family:inherit] layer-components:color-inherit layer-components:overflow-hidden layer-components:resize-none', 'layer-variants:rounded-lg layer-variants:px-4 layer-variants:py-4', {
+    return (_jsx("textarea", Object.assign({ ref: finalRef, className: classNames(inputClassName, 'layer-components:([font-family:inherit] color-inherit overflow-hidden resize-none)', 'layer-variants:(rounded-lg px-4 py-4)', {
             'layer-components:[resize:vertical]': !autoSize,
             'layer-components:[resize:none]': autoSize,
         }, className), rows: autoSize ? 1 : rows, onChange: handleChange, onFocus: handleFocus, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : randomPlaceholder }, rest)));

package/dist/esm/components/textArea/TextArea.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { TextArea } from './TextArea.js';
 const meta = {
     title: 'Components/TextArea',

package/dist/esm/components/textArea/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './TextArea.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/toasts/toasts.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export { Toaster } from 'react-hot-toast';
 //# sourceMappingURL=toasts.js.map

package/dist/esm/components/toggleGroup/toggleGroup.js

@@ -1,8 +1,7 @@
-// @unocss-include
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { withClassName } from '../../hooks/withClassName.js';
-export const ToggleGroupRoot = withClassName(ToggleGroupPrimitive.Root, 'layer-components:inline-flex layer-components:bg-gray-wash layer-components:bg-darken-1 layer-components:rounded-lg layer-components:gap-sm');
-export const ToggleGroupItem = withClassName(ToggleGroupPrimitive.Item, 'layer-components:rounded-full layer-components:color-black layer-components:bg-gray layer-components:bg-lighten-3 layer-components:py-sm layer-components:px-md layer-components:flex layer-components:items-center layer-components:border-transparent layer-components:border-1 layer-components:border-solid layer-components:justify-center layer-components:cursor-pointer', 'layer-components:hover:bg-lighten-2 layer-components:active:bg-lighten-2 layer-components:focus-visible:ring-4 layer-components:focus-visible:ring-primary layer-components:focus-visible:outline-off', 'layer-components:[&[data-state=on]]:bg-primary-light layer-components:[&[data-state=on]]:border-default');
+export const ToggleGroupRoot = withClassName(ToggleGroupPrimitive.Root, 'layer-components:(inline-flex bg-gray-wash bg-darken-1 rounded-lg gap-sm)');
+export const ToggleGroupItem = withClassName(ToggleGroupPrimitive.Item, 'layer-components:(rounded-full color-black bg-gray bg-lighten-3 py-sm px-md flex items-center border-transparent border-1 border-solid justify-center cursor-pointer)', 'layer-components:(hover:bg-lighten-2 active:bg-lighten-2 focus-visible:(ring-4 ring-primary outline-off))', 'layer-components:[&[data-state=on]]:(bg-primary-light border-default)');
 export const ToggleGroup = Object.assign(ToggleGroupRoot, {
     Item: ToggleGroupItem,
 });

package/dist/esm/components/tooltip/Tooltip.js

@@ -1,4 +1,3 @@
-// @unocss-include
 'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -17,10 +16,10 @@ import classNames from 'clsx';
 import { BoxContext } from '../box/Box.js';
 function Content(_a) {
     var { children, className, color = 'contrast' } = _a, props = __rest(_a, ["children", "className", "color"]);
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(BoxContext.Provider, { value: { spacingScale: 1 }, children: _jsxs(TooltipPrimitive.Content, Object.assign({ className: classNames('layer-components:relative layer-components:rounded-sm layer-components:py-2 layer-components:px-3 layer-components:text-sm layer-components:leading-tight layer-components:shadow-sm layer-components:select-none layer-components:hidden layer-components:z-tooltip', '[&[data-state=delayed-open]]:flex', '[&[data-state=instant-open]]:flex', 'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]', 'layer-components:[&[data-state=delayed-open]]:animate-popover-in', {
-                    'layer-variants:bg-black layer-variants:color-white': color === 'contrast',
-                    'layer-variants:bg-white layer-variants:color-black': color === 'white' || color === 'neutral',
-                    'layer-variants:bg-attention-ink layer-variants:color-white': color === 'attention',
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(BoxContext.Provider, { value: { spacingScale: 1 }, children: _jsxs(TooltipPrimitive.Content, Object.assign({ className: classNames('layer-components:(relative rounded-sm py-2 px-3 text-sm leading-tight shadow-sm select-none hidden z-tooltip)', '[&[data-state=delayed-open]]:flex', '[&[data-state=instant-open]]:flex', 'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]', 'layer-components:[&[data-state=delayed-open]]:animate-popover-in', {
+                    'layer-variants:(bg-black color-white)': color === 'contrast',
+                    'layer-variants:(bg-white color-black)': color === 'white' || color === 'neutral',
+                    'layer-variants:(bg-attention-ink color-white)': color === 'attention',
                 }, className) }, props, { children: [children, _jsx(TooltipPrimitive.Arrow, { className: "layer-components:arrow" })] })) }) }));
 }
 export const TooltipProvider = TooltipPrimitive.Provider;

package/dist/esm/components/tooltip/Tooltip.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '../box/Box.js';
 import { Tooltip } from './Tooltip.js';

package/dist/esm/components/tooltip/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './Tooltip.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/typography/index.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './typography.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/typography/typography.js

@@ -1,10 +1,9 @@
-// @unocss-include
 import { withClassName } from '../../hooks/withClassName.js';
 const baseHeadingClass = 'layer-components:my-0';
-export const H1 = withClassName('h1', baseHeadingClass, 'layer-components:font-title layer-components:text-2xl layer-components:font-semibold layer-components:color-inherit layer-components:color-darken-1');
-export const H2 = withClassName('h2', baseHeadingClass, 'layer-components:text-lg layer-components:font-title layer-components:font-bold layer-components:color-inherit layer-components:color-lighten-1');
-export const H3 = withClassName('h3', baseHeadingClass, 'layer-components:font-title layer-components:text-md layer-components:font-500 layer-components:color-inherit layer-components:color-lighten-2');
-export const H4 = withClassName('h4', baseHeadingClass, 'layer-components:text-xs layer-components:uppercase layer-components:color-inherit layer-components:color-lighten-2');
+export const H1 = withClassName('h1', baseHeadingClass, 'layer-components:(font-title text-2xl font-semibold color-inherit color-darken-1)');
+export const H2 = withClassName('h2', baseHeadingClass, 'layer-components:(text-lg font-title font-bold color-inherit color-lighten-1)');
+export const H3 = withClassName('h3', baseHeadingClass, 'layer-components:(font-title text-md font-500 color-inherit color-lighten-2)');
+export const H4 = withClassName('h4', baseHeadingClass, 'layer-components:(text-xs uppercase color-inherit color-lighten-2)');
 export const H5 = withClassName('h5', baseHeadingClass);
-export const P = withClassName('p', 'layer-components:my-0 layer-components:leading-normal');
+export const P = withClassName('p', 'layer-components:(my-0 leading-normal)');
 //# sourceMappingURL=typography.js.map

package/dist/esm/components/utility/HideWhileKeyboardOpen.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/dist/esm/components/utility/SlotDiv.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/dist/esm/hooks/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 export * from './useAnimationFrame.js';
 export * from './useLongPress.js';
 export * from './useMergedRef.js';

package/dist/esm/hooks/useAnimationFrame.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useEffect, useRef } from 'react';
 import { useStableCallback } from './useStableCallback.js';
 export function useAnimationFrame(callback, initialContext) {

package/dist/esm/hooks/useIdOrGenerated.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useId } from 'react';
 export function useIdOrGenerated(id) {
     const generated = useId();

package/dist/esm/hooks/useLongPress.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { preventDefault } from '@a-type/utils';
 import { useDrag } from '@use-gesture/react';
 import { useEffect, useMemo, useRef, useState } from 'react';

package/dist/esm/hooks/useMediaQuery.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useEffect, useState } from 'react';
 export function useMediaQuery(query) {
     const [matches, setMatches] = useState(false);

package/dist/esm/hooks/useMergedRef.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import * as React from 'react';
 function useMergedRef(...refs) {
     return React.useCallback((element) => {

package/dist/esm/hooks/useOnUnmount.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useCallback, useRef } from 'react';
 import { useStableCallback } from './useStableCallback.js';
 /**

package/dist/esm/hooks/useOverrideTheme.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useLayoutEffect } from 'react';
 export function useOverrideTheme(theme) {
     useLayoutEffect(() => {

package/dist/esm/hooks/useRotatingShuffledValue.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useEffect, useState } from 'react';
 export function useRotatingShuffledValue(options, intervalMs = 5000) {
     const [selected, setSelected] = useState(options ? options[Math.floor(Math.random() * options.length)] : undefined);

package/dist/esm/hooks/useSize.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { debounce } from '@a-type/utils';
 import { useEffect, useMemo, useRef } from 'react';
 import { useStableCallback } from './useStableCallback.js';

package/dist/esm/hooks/useStableCallback.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useCallback, useMemo, useRef } from 'react';
 export function useStableCallback(callback) {
     const ref = useRef(callback);

package/dist/esm/hooks/useStayScrolledToBottom.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useCallback, useEffect, useRef, useState } from 'react';
 export function useStayScrolledToBottom(enabled = true) {
     const ref = useRef(null);

package/dist/esm/hooks/useStorage.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useEffect, useMemo } from 'react';
 import { proxy, useSnapshot } from 'valtio';
 function makeUseStorage(storage, cache, name = storage.constructor.name) {

package/dist/esm/hooks/useTitleBarColor.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var _a, _b;
 import { useCallback, useEffect } from 'react';
 import { useResolvedColorMode } from '../colorMode.js';

package/dist/esm/hooks/useTitleBarColor.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, Button, Dialog, Icon, Provider } from '../components/index.js';

package/dist/esm/hooks/useToggle.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useCallback, useState } from 'react';
 export function useToggle(initialValue = false) {
     const [value, setValue] = useState(initialValue);

package/dist/esm/hooks/useVirtualKeyboardBehavior.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useEffect } from 'react';
 export function useVirtualKeyboardBehavior(behavior) {
     useEffect(() => {

package/dist/esm/hooks/useVisualViewportOffset.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { useEffect, useState } from 'react';
 import { useConfig } from '../components/provider/Provider.js';
 import { useStableCallback } from './useStableCallback.js';

package/dist/esm/hooks/withClassName.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/dist/esm/hooks/withProps.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx } from "react/jsx-runtime";
 export const withProps = (Component, extras) => {
     return (props) => {

package/dist/esm/hooks.js

@@ -1,3 +1,2 @@
-// @unocss-include
 export * from './hooks/index.js';
 //# sourceMappingURL=hooks.js.map

package/dist/esm/index.js

@@ -1,4 +1,3 @@
-// @unocss-include
 export { clsx } from 'clsx';
 export { toast } from 'react-hot-toast';
 export * from './colorMode.js';

package/dist/esm/shadows.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { Box } from './components/index.js';

package/dist/esm/themes.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useRef, useState } from 'react';

package/dist/esm/uno/colors.js

@@ -1,4 +1,3 @@
-// @unocss-include
 export const colorConstants = `
 	--dyn-saturation-x-wash: calc(pow(var(--global-saturation, 1), 0.6));
 	--dyn-saturation-x-light: calc(pow(var(--global-saturation, 1), 0.05));

package/dist/esm/uno/shadows.js

@@ -1,4 +1,3 @@
-// @unocss-include
 export function getShadows(hard = false) {
     const opacity1 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * 2 * (1 + var(--dyn-source-mode-adjust, 0)))`;
     const opacity2 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * (1 + var(--dyn-source-mode-adjust, 0)))`;

package/dist/esm/uno/uno.preset.js

@@ -1,4 +1,3 @@
-// @unocss-include
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/dist/esm/utilities.stories.js

@@ -1,4 +1,3 @@
-// @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, P } from './components/index.js';
 const meta = {

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@a-type/ui",
-  "version": "2.7.6",
+  "version": "2.8.0",
   "type": "module",
   "files": [
     "/dist",
     "/src"
   ],
+  "sideEffects": false,
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
@@ -107,7 +108,7 @@
     "build:transpile": "tsc && tsc -P tsconfig-cjs.json",
     "build:prefix": "node ./scripts/addUnoInclude.js",
     "build:process": "unocss \"./dist/**/*.js\" -o ./dist/css/main.css --write-transformed -m -c uno.config.js",
-    "build": "pnpm run build:transpile && pnpm run build:prefix && pnpm run build:process",
+    "build": "pnpm run build:transpile && pnpm run build:process",
     "ci:version": "pnpm changeset version",
     "ci:publish": "pnpm changeset publish --access=public",
     "prepublish": "pnpm run build",