sheerly 0.0.2 → 0.0.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/README.md +48 -0
- package/lib/accordion.css +1 -1
- package/lib/accordion.d.ts +2 -2
- package/lib/alert.css +1 -1
- package/lib/alert.d.ts +4 -4
- package/lib/avatar.css +1 -1
- package/lib/avatar.d.ts +4 -4
- package/lib/badge.css +1 -1
- package/lib/badge.d.ts +1 -1
- package/lib/breadcrumb.css +1 -1
- package/lib/breadcrumb.d.ts +34 -8
- package/lib/button.css +1 -1
- package/lib/button.d.ts +1 -1
- package/lib/card.css +1 -1
- package/lib/card.d.ts +7 -7
- package/lib/carousel.d.ts +2 -2
- package/lib/checkbox.d.ts +1 -1
- package/lib/dialog.css +1 -1
- package/lib/dialog.d.ts +7 -7
- package/lib/dropdown-menu.css +1 -1
- package/lib/dropdown-menu.d.ts +20 -15
- package/lib/hover-card.css +1 -1
- package/lib/hover-card.d.ts +2 -2
- package/lib/index.css +1 -1
- package/lib/index.js +95 -95
- package/lib/input.css +1 -1
- package/lib/input.d.ts +1 -1
- package/lib/kbd.css +1 -1
- package/lib/kbd.d.ts +2 -2
- package/lib/label.css +1 -1
- package/lib/label.d.ts +1 -1
- package/lib/pagination.css +1 -1
- package/lib/pagination.d.ts +38 -13
- package/lib/popover.css +1 -1
- package/lib/popover.d.ts +2 -2
- package/lib/progress.d.ts +1 -1
- package/lib/radio.d.ts +2 -2
- package/lib/root.css +1 -1
- package/lib/root.terminal.css +1 -0
- package/lib/scrollbar.d.ts +1 -1
- package/lib/select.css +1 -1
- package/lib/select.d.ts +1 -1
- package/lib/separator.d.ts +1 -1
- package/lib/sheet.css +1 -1
- package/lib/sheet.d.ts +7 -7
- package/lib/skeleton.d.ts +1 -1
- package/lib/slider.d.ts +1 -1
- package/lib/spinner.d.ts +1 -1
- package/lib/switch.d.ts +1 -1
- package/lib/table.css +1 -1
- package/lib/table.d.ts +2 -2
- package/lib/tabs.css +1 -1
- package/lib/tabs.d.ts +10 -7
- package/lib/textarea.css +1 -1
- package/lib/textarea.d.ts +1 -1
- package/lib/toggle.css +1 -1
- package/lib/toggle.d.ts +1 -1
- package/lib/tooltip.css +1 -1
- package/lib/tooltip.d.ts +2 -2
- package/lib/typography.css +1 -1
- package/lib/typography.d.ts +1 -1
- package/package.json +17 -15
- package/src/accordion.css +2 -2
- package/src/alert.css +1 -1
- package/src/avatar.css +1 -1
- package/src/badge.css +1 -1
- package/src/breadcrumb.css +1 -1
- package/src/breadcrumb.tsx +67 -20
- package/src/button.css +1 -1
- package/src/card.css +2 -2
- package/src/dialog.css +2 -2
- package/src/dropdown-menu.css +1 -1
- package/src/dropdown-menu.tsx +21 -8
- package/src/hover-card.css +1 -1
- package/src/input.css +1 -1
- package/src/kbd.css +1 -1
- package/src/label.css +1 -1
- package/src/pagination.css +1 -1
- package/src/pagination.tsx +85 -26
- package/src/popover.css +1 -1
- package/src/root.css +6 -0
- package/src/root.terminal.css +77 -0
- package/src/select.css +1 -1
- package/src/sheet.css +2 -2
- package/src/table.css +1 -1
- package/src/tabs.css +1 -1
- package/src/tabs.tsx +16 -9
- package/src/textarea.css +1 -1
- package/src/toggle.css +1 -1
- package/src/tooltip.css +1 -1
- package/src/typography.css +2 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--sheerly-font-sans:"IBM Plex Mono", ui-monospace, monospace;--sheerly-font-mono:"IBM Plex Mono", ui-monospace, monospace;--sheerly-radius:0rem;--sheerly-background:oklch(98.51% 0 0);--sheerly-foreground:oklch(14.48% 0 0);--sheerly-card:oklch(97.02% 0 0);--sheerly-card-foreground:oklch(14.48% 0 0);--sheerly-popover:oklch(98.51% 0 0);--sheerly-popover-foreground:oklch(14.48% 0 0);--sheerly-primary:oklch(69.96% .202 44.4414);--sheerly-primary-foreground:oklch(0% 0 0);--sheerly-secondary:oklch(92.19% 0 0);--sheerly-secondary-foreground:oklch(14.48% 0 0);--sheerly-muted:oklch(94.01% 0 0);--sheerly-muted-foreground:oklch(44.95% 0 0);--sheerly-accent:oklch(75.12% .168 52.0772);--sheerly-accent-foreground:oklch(0% 0 0);--sheerly-destructive:oklch(62.8% .2577 29.2339);--sheerly-border:oklch(85.14% 0 0);--sheerly-input:oklch(85.14% 0 0);--sheerly-ring:oklch(69.96% .202 44.4414);--sheerly-sidebar:oklch(98.51% 0 0);--sheerly-sidebar-foreground:oklch(14.48% 0 0);--sheerly-sidebar-primary:oklch(20.46% 0 0);--sheerly-sidebar-primary-foreground:oklch(98.51% 0 0);--sheerly-sidebar-accent:oklch(97.02% 0 0);--sheerly-sidebar-accent-foreground:oklch(20.46% 0 0);--sheerly-sidebar-border:oklch(92.19% 0 0);--sheerly-sidebar-ring:oklch(70.9% 0 0)}.dark{--sheerly-background:oklch(18.22% 0 0);--sheerly-foreground:oklch(96.12% 0 0);--sheerly-card:oklch(21.78% 0 0);--sheerly-card-foreground:oklch(96.12% 0 0);--sheerly-popover:oklch(18.22% 0 0);--sheerly-popover-foreground:oklch(96.12% 0 0);--sheerly-primary:oklch(69.96% .202 44.4414);--sheerly-primary-foreground:oklch(0% 0 0);--sheerly-secondary:oklch(32.11% 0 0);--sheerly-secondary-foreground:oklch(96.12% 0 0);--sheerly-muted:oklch(26.86% 0 0);--sheerly-muted-foreground:oklch(72.52% 0 0);--sheerly-accent:oklch(75.12% .168 52.0772);--sheerly-accent-foreground:oklch(0% 0 0);--sheerly-destructive:oklch(62.8% .2577 29.2339);--sheerly-border:oklch(37.15% 0 0);--sheerly-input:oklch(37.15% 0 0);--sheerly-ring:oklch(69.96% .202 44.4414);--sheerly-sidebar:oklch(20.46% 0 0);--sheerly-sidebar-foreground:oklch(98.51% 0 0);--sheerly-sidebar-primary:oklch(48.78% .2432 264.405);--sheerly-sidebar-primary-foreground:oklch(98.51% 0 0);--sheerly-sidebar-accent:oklch(26.86% 0 0);--sheerly-sidebar-accent-foreground:oklch(98.51% 0 0);--sheerly-sidebar-border:oklch(27.68% 0 0);--sheerly-sidebar-ring:oklch(43.86% 0 0)}
|
package/lib/scrollbar.d.ts
CHANGED
|
@@ -14,4 +14,4 @@ export type ScrollbarProps<T extends ElementType = 'div'> = PolymorphicProps<T,
|
|
|
14
14
|
* <Scrollbar data-orientation="vertical" style={{ maxHeight: 200 }}>…</Scrollbar>
|
|
15
15
|
* <Scrollbar style={{ maxHeight: 200, overflowY: 'auto' }}>…</Scrollbar>
|
|
16
16
|
*/
|
|
17
|
-
export declare function Scrollbar<T extends ElementType = 'div'>({ as, className, ...props }: ScrollbarProps<T>): import(
|
|
17
|
+
export declare function Scrollbar<T extends ElementType = 'div'>({ as, className, ...props }: ScrollbarProps<T>): import('react').JSX.Element;
|
package/lib/select.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-select{appearance:base-select}.sheerly-select::picker(select){appearance:base-select}.sheerly-select{border-radius:var(--sheerly-radius-lg);border:1px solid var(--sheerly-input);box-sizing:border-box;white-space:nowrap;
|
|
1
|
+
.sheerly-select{appearance:base-select}.sheerly-select::picker(select){appearance:base-select}.sheerly-select{border-radius:var(--sheerly-radius-lg);border:1px solid var(--sheerly-input);box-sizing:border-box;width:fit-content;font-family:var(--sheerly-font-sans);white-space:nowrap;color:var(--sheerly-foreground);cursor:pointer;background-color:#0000;outline:none;align-items:center;gap:8px;height:32px;padding:0 12px;font-size:14px;font-weight:400;line-height:20px;transition:border-color .15s,box-shadow .15s;display:inline-flex}.sheerly-select:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-select:disabled{pointer-events:none;opacity:.5}.sheerly-select[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-select:invalid,.sheerly-select[data-placeholder]{color:var(--sheerly-muted-foreground)}.sheerly-select[data-size=sm]{height:32px}.sheerly-select[data-size=lg]{height:40px;font-size:16px}.sheerly-select::picker-icon{width:16px;height:16px;color:var(--sheerly-muted-foreground);content:"";background-color:currentColor;transition:rotate .2s;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") 50%/contain no-repeat}.sheerly-select:open::picker-icon{rotate:180deg}.sheerly-select selectedcontent{align-items:center;gap:8px;display:flex}.sheerly-select option[value=""]{color:var(--sheerly-muted-foreground)}.sheerly-select::picker(select){border:1px solid var(--sheerly-border);border-radius:var(--sheerly-radius-xl);background-color:var(--sheerly-popover);color:var(--sheerly-popover-foreground);opacity:0;max-height:256px;transition:all .2s allow-discrete;scrollbar-width:thin;scrollbar-color:oklch(from var(--sheerly-foreground) l c h / 20%) transparent;padding:4px;overflow-y:auto;box-shadow:0 4px 16px -4px oklch(0% 0 0/.08),0 1px 2px oklch(0% 0 0/.04)}.sheerly-select::picker(select)::-webkit-scrollbar{width:8px}.sheerly-select::picker(select)::-webkit-scrollbar-track{background:0 0}.sheerly-select::picker(select)::-webkit-scrollbar-thumb{border-radius:var(--sheerly-radius-full);background-clip:padding-box;background-color:oklch(from var(--sheerly-foreground) l c h / 20%);border:2px solid #0000}.sheerly-select::picker(select)::-webkit-scrollbar-thumb:hover{background-color:oklch(from var(--sheerly-foreground) l c h / 35%)}.sheerly-select:open::picker(select){opacity:1}@starting-style{.sheerly-select:open::picker(select){opacity:0}}.sheerly-select option{border-radius:var(--sheerly-radius-md);cursor:default;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:6px 8px;font-size:14px;line-height:20px;transition:background-color .1s;display:flex}.sheerly-select option:hover,.sheerly-select option:focus{background-color:var(--sheerly-accent)}.sheerly-select option:checked{font-weight:500}.sheerly-select option:disabled{color:var(--sheerly-muted-foreground);pointer-events:none}.sheerly-select option::checkmark{color:var(--sheerly-foreground);order:1;margin-left:auto}.sheerly-select optgroup{padding:4px 0}.sheerly-select optgroup legend{color:var(--sheerly-muted-foreground);padding:4px 8px;font-size:12px;font-weight:500;line-height:16px}.sheerly-select optgroup+optgroup{border-top:1px solid var(--sheerly-border);margin-top:4px;padding-top:4px}
|
package/lib/select.d.ts
CHANGED
|
@@ -13,4 +13,4 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
|
13
13
|
* <option value="banana">Banana</option>
|
|
14
14
|
* </Select>
|
|
15
15
|
*/
|
|
16
|
-
export declare function Select({ className, children, ...props }: SelectProps): import(
|
|
16
|
+
export declare function Select({ className, children, ...props }: SelectProps): import('react').JSX.Element;
|
package/lib/separator.d.ts
CHANGED
|
@@ -12,4 +12,4 @@ export type SeparatorProps<T extends ElementType = 'div'> = PolymorphicProps<T,
|
|
|
12
12
|
* @example
|
|
13
13
|
* <Separator />
|
|
14
14
|
*/
|
|
15
|
-
export declare function Separator<T extends ElementType = 'div'>({ as, className, ...props }: SeparatorProps<T>): import(
|
|
15
|
+
export declare function Separator<T extends ElementType = 'div'>({ as, className, ...props }: SeparatorProps<T>): import('react').JSX.Element;
|
package/lib/sheet.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-sheet{z-index:50;background-color:var(--sheerly-background);color:var(--sheerly-foreground);box-shadow:0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);opacity:0;max-width:100vw;max-height:100dvh;transition:translate .3s cubic-bezier(.32, .72, 0, 1), opacity .3s ease, display .3s allow-discrete, overlay .3s allow-discrete;border:none;outline:none;flex-direction:column;gap:16px;margin:0;padding:0;font-size:14px;line-height:20px;display:none;position:fixed;overflow:hidden}.sheerly-sheet[open]{opacity:1;display:flex}.sheerly-sheet::backdrop{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:0;transition:opacity .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;background-color:oklch(0% 0 0/.1)}.sheerly-sheet[open]::backdrop{opacity:1}@starting-style{.sheerly-sheet[open]::backdrop{opacity:0}}.sheerly-sheet{width:100%;max-width:384px;height:100dvh;inset:0 0 0 auto;translate:100%}.sheerly-sheet[open]{translate:0}@starting-style{.sheerly-sheet[open]{translate:100%}}.sheerly-sheet[data-side=left]{width:100%;max-width:384px;height:100dvh;inset:0 auto 0 0;translate:-100%}.sheerly-sheet[data-side=left][open]{translate:0}@starting-style{.sheerly-sheet[data-side=left][open]{translate:-100%}}.sheerly-sheet[data-side=top]{width:100%;max-width:none;height:auto;inset:0 0 auto;translate:0 -100%}.sheerly-sheet[data-side=top][open]{translate:0}@starting-style{.sheerly-sheet[data-side=top][open]{translate:0 -100%}}.sheerly-sheet[data-side=bottom]{width:100%;max-width:none;height:auto;inset:auto 0 0;translate:0 100%}.sheerly-sheet[data-side=bottom][open]{translate:0}@starting-style{.sheerly-sheet[data-side=bottom][open]{translate:0 100%}}.sheerly-sheet-header{flex-direction:column;flex-shrink:0;gap:4px;padding:16px;display:flex}.sheerly-sheet-title{color:var(--sheerly-foreground);margin:0;padding-right:32px;font-
|
|
1
|
+
.sheerly-sheet{z-index:50;background-color:var(--sheerly-background);color:var(--sheerly-foreground);box-shadow:0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);opacity:0;max-width:100vw;max-height:100dvh;transition:translate .3s cubic-bezier(.32, .72, 0, 1), opacity .3s ease, display .3s allow-discrete, overlay .3s allow-discrete;border:none;outline:none;flex-direction:column;gap:16px;margin:0;padding:0;font-size:14px;line-height:20px;display:none;position:fixed;overflow:hidden}.sheerly-sheet[open]{opacity:1;display:flex}.sheerly-sheet::backdrop{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:0;transition:opacity .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;background-color:oklch(0% 0 0/.1)}.sheerly-sheet[open]::backdrop{opacity:1}@starting-style{.sheerly-sheet[open]::backdrop{opacity:0}}.sheerly-sheet{width:100%;max-width:384px;height:100dvh;inset:0 0 0 auto;translate:100%}.sheerly-sheet[open]{translate:0}@starting-style{.sheerly-sheet[open]{translate:100%}}.sheerly-sheet[data-side=left]{width:100%;max-width:384px;height:100dvh;inset:0 auto 0 0;translate:-100%}.sheerly-sheet[data-side=left][open]{translate:0}@starting-style{.sheerly-sheet[data-side=left][open]{translate:-100%}}.sheerly-sheet[data-side=top]{width:100%;max-width:none;height:auto;inset:0 0 auto;translate:0 -100%}.sheerly-sheet[data-side=top][open]{translate:0}@starting-style{.sheerly-sheet[data-side=top][open]{translate:0 -100%}}.sheerly-sheet[data-side=bottom]{width:100%;max-width:none;height:auto;inset:auto 0 0;translate:0 100%}.sheerly-sheet[data-side=bottom][open]{translate:0}@starting-style{.sheerly-sheet[data-side=bottom][open]{translate:0 100%}}.sheerly-sheet-header{flex-direction:column;flex-shrink:0;gap:4px;padding:16px;display:flex}.sheerly-sheet-title{font-family:var(--sheerly-font-sans);color:var(--sheerly-foreground);margin:0;padding-right:32px;font-size:16px;font-weight:500;line-height:1}.sheerly-sheet-description{font-family:var(--sheerly-font-sans);color:var(--sheerly-muted-foreground);margin:0;font-size:14px;font-weight:400;line-height:20px}.sheerly-sheet-body{flex:1;padding:0 16px;overflow-y:auto}.sheerly-sheet-footer{flex-direction:column;flex-shrink:0;gap:8px;margin-top:auto;padding:16px;display:flex}.sheerly-sheet-footer>*{width:100%}.sheerly-sheet-close{border-radius:var(--sheerly-radius-md);width:28px;height:28px;color:var(--sheerly-muted-foreground);cursor:pointer;z-index:1;background-color:#0000;border:none;outline:none;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex;position:absolute;top:12px;right:16px}.sheerly-sheet-close:hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-sheet-close:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-sheet-close svg{width:16px;height:16px}.sheerly-sheet-close:empty:before{content:"";background-color:currentColor;width:16px;height:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") 50%/contain no-repeat}
|
package/lib/sheet.d.ts
CHANGED
|
@@ -15,15 +15,15 @@ export interface SheetProps extends DialogHTMLAttributes<HTMLDialogElement> {
|
|
|
15
15
|
* <SheetBody>…</SheetBody>
|
|
16
16
|
* </Sheet>
|
|
17
17
|
*/
|
|
18
|
-
export declare function Sheet({ className, ...props }: SheetProps): import(
|
|
18
|
+
export declare function Sheet({ className, ...props }: SheetProps): import('react').JSX.Element;
|
|
19
19
|
export type SheetHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
20
|
-
export declare function SheetHeader<T extends ElementType = 'div'>({ as, className, ...props }: SheetHeaderProps<T>): import(
|
|
20
|
+
export declare function SheetHeader<T extends ElementType = 'div'>({ as, className, ...props }: SheetHeaderProps<T>): import('react').JSX.Element;
|
|
21
21
|
export type SheetTitleProps<T extends ElementType = 'h3'> = PolymorphicProps<T>;
|
|
22
|
-
export declare function SheetTitle<T extends ElementType = 'h3'>({ as, className, ...props }: SheetTitleProps<T>): import(
|
|
22
|
+
export declare function SheetTitle<T extends ElementType = 'h3'>({ as, className, ...props }: SheetTitleProps<T>): import('react').JSX.Element;
|
|
23
23
|
export type SheetDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<T>;
|
|
24
|
-
export declare function SheetDescription<T extends ElementType = 'p'>({ as, className, ...props }: SheetDescriptionProps<T>): import(
|
|
24
|
+
export declare function SheetDescription<T extends ElementType = 'p'>({ as, className, ...props }: SheetDescriptionProps<T>): import('react').JSX.Element;
|
|
25
25
|
export type SheetBodyProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
26
|
-
export declare function SheetBody<T extends ElementType = 'div'>({ as, className, ...props }: SheetBodyProps<T>): import(
|
|
26
|
+
export declare function SheetBody<T extends ElementType = 'div'>({ as, className, ...props }: SheetBodyProps<T>): import('react').JSX.Element;
|
|
27
27
|
export type SheetFooterProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
28
|
-
export declare function SheetFooter<T extends ElementType = 'div'>({ as, className, ...props }: SheetFooterProps<T>): import(
|
|
29
|
-
export declare function SheetClose({ className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): import(
|
|
28
|
+
export declare function SheetFooter<T extends ElementType = 'div'>({ as, className, ...props }: SheetFooterProps<T>): import('react').JSX.Element;
|
|
29
|
+
export declare function SheetClose({ className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): import('react').JSX.Element;
|
package/lib/skeleton.d.ts
CHANGED
|
@@ -9,4 +9,4 @@ export type SkeletonProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
|
9
9
|
* @example
|
|
10
10
|
* <Skeleton style={{ width: 200, height: 20, borderRadius: 6 }} />
|
|
11
11
|
*/
|
|
12
|
-
export declare function Skeleton<T extends ElementType = 'div'>({ as, className, ...props }: SkeletonProps<T>): import(
|
|
12
|
+
export declare function Skeleton<T extends ElementType = 'div'>({ as, className, ...props }: SkeletonProps<T>): import('react').JSX.Element;
|
package/lib/slider.d.ts
CHANGED
|
@@ -6,4 +6,4 @@ export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
|
|
|
6
6
|
* @example
|
|
7
7
|
* <Slider min={0} max={100} defaultValue={50} />
|
|
8
8
|
*/
|
|
9
|
-
export declare function Slider({ className, ...props }: SliderProps): import(
|
|
9
|
+
export declare function Slider({ className, ...props }: SliderProps): import('react').JSX.Element;
|
package/lib/spinner.d.ts
CHANGED
|
@@ -13,4 +13,4 @@ export type SpinnerProps<T extends ElementType = 'span'> = PolymorphicProps<T, {
|
|
|
13
13
|
* @example
|
|
14
14
|
* <Spinner data-size="lg" />
|
|
15
15
|
*/
|
|
16
|
-
export declare function Spinner<T extends ElementType = 'span'>({ as, className, children, ...props }: SpinnerProps<T>): import(
|
|
16
|
+
export declare function Spinner<T extends ElementType = 'span'>({ as, className, children, ...props }: SpinnerProps<T>): import('react').JSX.Element;
|
package/lib/switch.d.ts
CHANGED
|
@@ -8,4 +8,4 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
|
|
|
8
8
|
* @example
|
|
9
9
|
* <Switch defaultChecked />
|
|
10
10
|
*/
|
|
11
|
-
export declare function Switch({ className, ...props }: SwitchProps): import(
|
|
11
|
+
export declare function Switch({ className, ...props }: SwitchProps): import('react').JSX.Element;
|
package/lib/table.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-table-container{width:100%;overflow-x:auto}.sheerly-table{caption-side:bottom;border-collapse:collapse;width:100%;
|
|
1
|
+
.sheerly-table-container{width:100%;overflow-x:auto}.sheerly-table{caption-side:bottom;border-collapse:collapse;width:100%;font-family:var(--sheerly-font-sans);color:var(--sheerly-foreground);font-size:14px;line-height:20px}.sheerly-table caption{color:var(--sheerly-muted-foreground);margin-top:16px;font-size:14px;line-height:20px}.sheerly-table thead tr{border-bottom:1px solid var(--sheerly-border)}.sheerly-table th{text-align:left;vertical-align:middle;white-space:nowrap;height:40px;color:var(--sheerly-foreground);padding:0 8px;font-weight:500}.sheerly-table tbody tr{border-bottom:1px solid var(--sheerly-border);transition:background-color .1s}.sheerly-table tbody tr:last-child{border-bottom:none}.sheerly-table tbody tr:hover{background-color:var(--sheerly-accent)}.sheerly-table tbody tr[data-state=selected]{background-color:var(--sheerly-muted)}.sheerly-table td{vertical-align:middle;white-space:nowrap;padding:8px}.sheerly-table tfoot{border-top:1px solid var(--sheerly-border);background-color:var(--sheerly-accent);font-weight:500}.sheerly-table tfoot tr:last-child{border-bottom:none}.sheerly-table tfoot td,.sheerly-table tfoot th{vertical-align:middle;padding:8px}
|
package/lib/table.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ElementType, TableHTMLAttributes } from 'react';
|
|
2
2
|
import { PolymorphicProps } from './utils/polymorphic';
|
|
3
3
|
export type TableContainerProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
4
|
-
export declare function TableContainer<T extends ElementType = 'div'>({ as, className, ...props }: TableContainerProps<T>): import(
|
|
4
|
+
export declare function TableContainer<T extends ElementType = 'div'>({ as, className, ...props }: TableContainerProps<T>): import('react').JSX.Element;
|
|
5
5
|
export type TableProps = TableHTMLAttributes<HTMLTableElement>;
|
|
6
6
|
/**
|
|
7
7
|
* A data table. Use semantic HTML inside (no classes on inner elements); wrap
|
|
@@ -13,4 +13,4 @@ export type TableProps = TableHTMLAttributes<HTMLTableElement>;
|
|
|
13
13
|
* <tbody><tr><td>Ada</td></tr></tbody>
|
|
14
14
|
* </Table>
|
|
15
15
|
*/
|
|
16
|
-
export declare function Table({ className, ...props }: TableProps): import(
|
|
16
|
+
export declare function Table({ className, ...props }: TableProps): import('react').JSX.Element;
|
package/lib/tabs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-tabs{flex-direction:column;gap:8px;display:flex}.sheerly-tabs-list{background-color:var(--sheerly-muted);border-radius:8px;justify-content:center;align-items:center;width:fit-content;height:36px;padding:3px;display:inline-flex}.sheerly-tabs-list[data-variant=line]{border-bottom:1px solid var(--sheerly-border);background-color:#0000;border-radius:0;gap:4px;height:auto;padding:0}.sheerly-tabs-trigger{white-space:nowrap;color:var(--sheerly-muted-foreground);cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:6px;outline:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:4px 8px;font-
|
|
1
|
+
.sheerly-tabs{flex-direction:column;gap:8px;display:flex}.sheerly-tabs-list{background-color:var(--sheerly-muted);border-radius:8px;justify-content:center;align-items:center;width:fit-content;height:36px;padding:3px;display:inline-flex}.sheerly-tabs-list[data-variant=line]{border-bottom:1px solid var(--sheerly-border);background-color:#0000;border-radius:0;gap:4px;height:auto;padding:0}.sheerly-tabs-trigger{font-family:var(--sheerly-font-sans);white-space:nowrap;color:var(--sheerly-muted-foreground);cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:6px;outline:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:4px 8px;font-size:14px;font-weight:500;line-height:20px;transition:color .15s,background-color .15s;display:inline-flex;position:relative}.sheerly-tabs-trigger:hover{color:var(--sheerly-foreground)}.sheerly-tabs-trigger:focus-visible{box-shadow:var(--sheerly-focus-ring)}.sheerly-tabs-trigger:disabled{pointer-events:none;opacity:.5}.sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-trigger[data-state=active]{background-color:var(--sheerly-background);color:var(--sheerly-foreground);box-shadow:0 1px 2px #0000000d}.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger{box-shadow:none;border-radius:0;padding:8px 12px}.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[data-state=active]{box-shadow:none;background-color:#0000}:is(.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[data-state=active]):after{content:"";background-color:var(--sheerly-foreground);height:2px;position:absolute;bottom:-1px;left:0;right:0}.sheerly-tabs-trigger svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}.sheerly-tabs-content{outline:none;flex:1}.sheerly-tabs-content[hidden]{display:none}
|
package/lib/tabs.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ElementType } from 'react';
|
|
2
2
|
import { PolymorphicProps } from './utils/polymorphic';
|
|
3
3
|
export type TabsProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
4
4
|
/**
|
|
@@ -17,20 +17,23 @@ export type TabsProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
|
17
17
|
* <TabsContent hidden>…</TabsContent>
|
|
18
18
|
* </Tabs>
|
|
19
19
|
*/
|
|
20
|
-
export declare function Tabs<T extends ElementType = 'div'>({ as, className, ...props }: TabsProps<T>): import(
|
|
20
|
+
export declare function Tabs<T extends ElementType = 'div'>({ as, className, ...props }: TabsProps<T>): import('react').JSX.Element;
|
|
21
21
|
export type TabsListProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
|
|
22
22
|
'data-variant'?: 'line';
|
|
23
23
|
}>;
|
|
24
24
|
/**
|
|
25
25
|
* Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
|
|
26
26
|
*/
|
|
27
|
-
export declare function TabsList<T extends ElementType = 'div'>({ as, className, ...props }: TabsListProps<T>): import(
|
|
28
|
-
export
|
|
27
|
+
export declare function TabsList<T extends ElementType = 'div'>({ as, className, ...props }: TabsListProps<T>): import('react').JSX.Element;
|
|
28
|
+
export type TabsTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<T, {
|
|
29
29
|
'data-state'?: 'active';
|
|
30
|
-
}
|
|
31
|
-
|
|
30
|
+
}>;
|
|
31
|
+
/**
|
|
32
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `button`).
|
|
33
|
+
*/
|
|
34
|
+
export declare function TabsTrigger<T extends ElementType = 'button'>({ as, className, ...props }: TabsTriggerProps<T>): import('react').JSX.Element;
|
|
32
35
|
export type TabsContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
33
36
|
/**
|
|
34
37
|
* Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
|
|
35
38
|
*/
|
|
36
|
-
export declare function TabsContent<T extends ElementType = 'div'>({ as, className, ...props }: TabsContentProps<T>): import(
|
|
39
|
+
export declare function TabsContent<T extends ElementType = 'div'>({ as, className, ...props }: TabsContentProps<T>): import('react').JSX.Element;
|
package/lib/textarea.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-textarea{border-radius:var(--sheerly-radius-lg);border:1px solid var(--sheerly-input);width:100%;min-height:64px;color:var(--sheerly-foreground);resize:vertical;field-sizing:content;background-color:#0000;outline:none;padding:6px 10px;font-
|
|
1
|
+
.sheerly-textarea{border-radius:var(--sheerly-radius-lg);border:1px solid var(--sheerly-input);width:100%;min-height:64px;font-family:var(--sheerly-font-sans);color:var(--sheerly-foreground);resize:vertical;field-sizing:content;background-color:#0000;outline:none;padding:6px 10px;font-size:14px;font-weight:400;line-height:20px;transition:border-color .15s,box-shadow .15s;display:block}.sheerly-textarea::placeholder{color:var(--sheerly-muted-foreground)}.sheerly-textarea:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-textarea:disabled{cursor:not-allowed;opacity:.5}.sheerly-textarea[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}
|
package/lib/textarea.d.ts
CHANGED
|
@@ -6,4 +6,4 @@ export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
|
|
|
6
6
|
* @example
|
|
7
7
|
* <Textarea placeholder="Type your message…" />
|
|
8
8
|
*/
|
|
9
|
-
export declare function Textarea({ className, ...props }: TextareaProps): import(
|
|
9
|
+
export declare function Textarea({ className, ...props }: TextareaProps): import('react').JSX.Element;
|
package/lib/toggle.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-toggle{border-radius:var(--sheerly-radius-lg);white-space:nowrap;color:var(--sheerly-foreground);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#0000;border:1px solid #0000;outline:none;justify-content:center;align-items:center;gap:4px;min-width:32px;height:32px;padding:0 10px;font-
|
|
1
|
+
.sheerly-toggle{border-radius:var(--sheerly-radius-lg);font-family:var(--sheerly-font-sans);white-space:nowrap;color:var(--sheerly-foreground);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#0000;border:1px solid #0000;outline:none;justify-content:center;align-items:center;gap:4px;min-width:32px;height:32px;padding:0 10px;font-size:14px;font-weight:500;line-height:20px;transition:all .15s;display:inline-flex}.sheerly-toggle>input[type=checkbox]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sheerly-toggle:hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-toggle:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-toggle:has(>input:focus-visible){border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-toggle:disabled{pointer-events:none;opacity:.5}.sheerly-toggle:has(>input:disabled){pointer-events:none;opacity:.5}.sheerly-toggle[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-toggle[aria-pressed=true],.sheerly-toggle[data-state=on]{background-color:var(--sheerly-muted)}.sheerly-toggle:has(>input:checked){background-color:var(--sheerly-muted)}.sheerly-toggle[data-variant=default]{background-color:#0000}.sheerly-toggle[data-variant=outline]{border-color:var(--sheerly-input);background-color:#0000}.sheerly-toggle[data-variant=outline]:hover{background-color:var(--sheerly-muted)}.sheerly-toggle[data-size=default]{min-width:32px;height:32px;padding:0 10px}.sheerly-toggle[data-size=sm]{border-radius:min(var(--sheerly-radius-md), 12px);min-width:28px;height:28px;padding:0 10px;font-size:12.8px}.sheerly-toggle[data-size=sm] svg{width:14px;height:14px}.sheerly-toggle[data-size=lg]{min-width:36px;height:36px;padding:0 10px}.sheerly-toggle:has([data-icon=inline-start]){padding-inline-start:8px}.sheerly-toggle:has([data-icon=inline-end]){padding-inline-end:8px}.sheerly-toggle[data-size=sm]:has([data-icon=inline-start]){padding-inline-start:6px}.sheerly-toggle[data-size=sm]:has([data-icon=inline-end]){padding-inline-end:6px}.sheerly-toggle svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}
|
package/lib/toggle.d.ts
CHANGED
|
@@ -20,4 +20,4 @@ export interface ToggleProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>,
|
|
|
20
20
|
* @example
|
|
21
21
|
* <Toggle defaultPressed data-variant="outline">Bold</Toggle>
|
|
22
22
|
*/
|
|
23
|
-
export declare function Toggle({ className, pressed, defaultPressed, onPressedChange, disabled, name, value, children, ...props }: ToggleProps): import(
|
|
23
|
+
export declare function Toggle({ className, pressed, defaultPressed, onPressedChange, disabled, name, value, children, ...props }: ToggleProps): import('react').JSX.Element;
|
package/lib/tooltip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-tooltip{anchor-name:--sheerly-tip;anchor-scope:--sheerly-tip;width:fit-content;display:inline-block}.sheerly-tooltip-content{position-anchor:--sheerly-tip;position-area:var(--sheerly-tooltip-position,block-start);position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;position-visibility:anchors-visible;inset:unset;background-color:var(--sheerly-foreground);color:var(--sheerly-background);text-align:center;white-space:normal;text-wrap:pretty;border-radius:var(--sheerly-radius-sm);pointer-events:none;opacity:0;max-width:200px;transition:opacity .15s ease, display .15s allow-discrete, overlay .15s allow-discrete;border:none;margin:6px;padding:4px 8px;font-
|
|
1
|
+
.sheerly-tooltip{anchor-name:--sheerly-tip;anchor-scope:--sheerly-tip;width:fit-content;display:inline-block}.sheerly-tooltip-content{position-anchor:--sheerly-tip;position-area:var(--sheerly-tooltip-position,block-start);position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;position-visibility:anchors-visible;inset:unset;background-color:var(--sheerly-foreground);color:var(--sheerly-background);font-family:var(--sheerly-font-sans);text-align:center;white-space:normal;text-wrap:pretty;border-radius:var(--sheerly-radius-sm);pointer-events:none;opacity:0;max-width:200px;transition:opacity .15s ease, display .15s allow-discrete, overlay .15s allow-discrete;border:none;margin:6px;padding:4px 8px;font-size:12px;font-weight:400;line-height:16px;position:fixed;overflow:visible}.sheerly-tooltip-content:popover-open{opacity:1}@starting-style{.sheerly-tooltip-content:popover-open{opacity:0}}
|
package/lib/tooltip.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export type TooltipProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
|
|
|
10
10
|
* <TooltipContent id="tt" popover="hint">More info</TooltipContent>
|
|
11
11
|
* </Tooltip>
|
|
12
12
|
*/
|
|
13
|
-
export declare function Tooltip<T extends ElementType = 'span'>({ as, className, ...props }: TooltipProps<T>): import(
|
|
13
|
+
export declare function Tooltip<T extends ElementType = 'span'>({ as, className, ...props }: TooltipProps<T>): import('react').JSX.Element;
|
|
14
14
|
export type TooltipContentProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
|
|
15
15
|
/** The floating label. Give it `popover="hint"` and an `id` matched by the trigger's `interestfor`. */
|
|
16
|
-
export declare function TooltipContent<T extends ElementType = 'span'>({ as, className, ...props }: TooltipContentProps<T>): import(
|
|
16
|
+
export declare function TooltipContent<T extends ElementType = 'span'>({ as, className, ...props }: TooltipContentProps<T>): import('react').JSX.Element;
|
package/lib/typography.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-typography{
|
|
1
|
+
.sheerly-typography{font-family:var(--sheerly-font-sans);color:var(--sheerly-foreground);font-size:16px;line-height:1.75}.sheerly-typography h1{letter-spacing:-.025em;text-wrap:balance;scroll-margin-block-start:5rem;font-size:36px;font-weight:800;line-height:1.1}.sheerly-typography h2{letter-spacing:-.025em;border-bottom:1px solid var(--sheerly-border);padding-bottom:8px;scroll-margin-block-start:5rem;font-size:30px;font-weight:600;line-height:1.2}.sheerly-typography h3{letter-spacing:-.025em;scroll-margin-block-start:5rem;font-size:24px;font-weight:600;line-height:1.3}.sheerly-typography h4{letter-spacing:-.025em;scroll-margin-block-start:5rem;font-size:20px;font-weight:600;line-height:1.4}.sheerly-typography h1,.sheerly-typography h2,.sheerly-typography h3,.sheerly-typography h4,.sheerly-typography p,.sheerly-typography blockquote,.sheerly-typography ul,.sheerly-typography ol,.sheerly-typography table,.sheerly-typography pre{margin-block-start:24px}.sheerly-typography h2{margin-block-start:40px}.sheerly-typography h3,.sheerly-typography h4{margin-block-start:32px}.sheerly-typography>:first-child{margin-block-start:0}.sheerly-typography a{color:var(--sheerly-primary);text-underline-offset:4px;font-weight:500;text-decoration:underline}.sheerly-typography a:hover{color:oklch(from var(--sheerly-primary) l c h / 80%)}.sheerly-typography blockquote{border-inline-start:2px solid var(--sheerly-border);color:var(--sheerly-muted-foreground);padding-inline-start:24px;font-style:italic}.sheerly-typography ul{padding-inline-start:24px;list-style:outside}.sheerly-typography ol{padding-inline-start:24px;list-style:decimal}.sheerly-typography li{margin-block-start:8px}.sheerly-typography li::marker{color:var(--sheerly-muted-foreground)}.sheerly-typography code{font-family:var(--sheerly-font-mono);border-radius:var(--sheerly-radius-sm);background-color:var(--sheerly-muted);padding:.2em .35em;font-size:.875em;font-weight:600}.sheerly-typography pre{border-radius:var(--sheerly-radius-md);background-color:var(--sheerly-muted);padding:16px;overflow-x:auto}.sheerly-typography pre code{background-color:#0000;padding:0;font-weight:400}.sheerly-typography table{border-collapse:collapse;width:100%;font-size:14px}.sheerly-typography th,.sheerly-typography td{border:1px solid var(--sheerly-border);text-align:start;padding:8px 16px}.sheerly-typography th{font-weight:700}.sheerly-typography tbody tr:nth-child(2n){background-color:oklch(from var(--sheerly-muted) l c h / 50%)}.sheerly-typography small{font-size:14px;font-weight:500;line-height:1}.sheerly-typography [data-variant=lead]{color:var(--sheerly-muted-foreground);font-size:20px}.sheerly-typography [data-variant=large]{font-size:18px;font-weight:600}.sheerly-typography [data-variant=muted]{color:var(--sheerly-muted-foreground);font-size:14px}
|
package/lib/typography.d.ts
CHANGED
|
@@ -14,4 +14,4 @@ export type TypographyProps<T extends ElementType = 'div'> = PolymorphicProps<T>
|
|
|
14
14
|
* <p>Some <a href="#">prose</a> with a <code>token</code>.</p>
|
|
15
15
|
* </Typography>
|
|
16
16
|
*/
|
|
17
|
-
export declare function Typography<T extends ElementType = 'div'>({ as, className, ...props }: TypographyProps<T>): import(
|
|
17
|
+
export declare function Typography<T extends ElementType = 'div'>({ as, className, ...props }: TypographyProps<T>): import('react').JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sheerly",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"scripts": {
|
|
6
|
-
"dev": "vite",
|
|
7
|
-
"build": "
|
|
8
|
-
"build:lib": "tsc -b && vite build --config vite.lib.
|
|
6
|
+
"dev": "vite --config vite.config.doc.ts",
|
|
7
|
+
"build": "node --run build:lib && node --run build:doc",
|
|
8
|
+
"build:lib": "tsc -b && vite build --config vite.config.lib.ts",
|
|
9
|
+
"build:doc": "tsc -b && vite build --config vite.config.doc.ts",
|
|
9
10
|
"lint": "oxlint",
|
|
10
11
|
"preview": "vite preview"
|
|
11
12
|
},
|
|
@@ -17,17 +18,18 @@
|
|
|
17
18
|
],
|
|
18
19
|
"devDependencies": {
|
|
19
20
|
"@tailwindcss/vite": "^4.3.3",
|
|
20
|
-
"@types/node": "^26.
|
|
21
|
-
"@types/react": "^19.
|
|
22
|
-
"@types/react-dom": "^19.
|
|
23
|
-
"@vitejs/plugin-react": "^6.
|
|
24
|
-
"nuqs": "^2.
|
|
25
|
-
"oxlint": "^1.
|
|
26
|
-
"react": "^19.
|
|
27
|
-
"react-dom": "^19.
|
|
21
|
+
"@types/node": "^26.6.3",
|
|
22
|
+
"@types/react": "^19.3.0",
|
|
23
|
+
"@types/react-dom": "^19.3.0",
|
|
24
|
+
"@vitejs/plugin-react": "^6.1.1",
|
|
25
|
+
"nuqs": "^2.10.1",
|
|
26
|
+
"oxlint": "^1.85.0",
|
|
27
|
+
"react": "^19.3.0",
|
|
28
|
+
"react-dom": "^19.3.0",
|
|
28
29
|
"tailwindcss": "^4.3.3",
|
|
29
30
|
"typescript": "^6.0.3",
|
|
30
|
-
"unplugin-dts": "^1.
|
|
31
|
-
"vite": "^8.
|
|
32
|
-
}
|
|
31
|
+
"unplugin-dts": "^1.1.1",
|
|
32
|
+
"vite": "^8.3.1"
|
|
33
|
+
},
|
|
34
|
+
"packageManager": "pnpm@11.28.0"
|
|
33
35
|
}
|
package/src/accordion.css
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
padding: 10px 0;
|
|
18
18
|
border: 1px solid transparent;
|
|
19
19
|
border-radius: var(--sheerly-radius-lg);
|
|
20
|
-
font-family:
|
|
20
|
+
font-family: var(--sheerly-font-sans);
|
|
21
21
|
font-size: 14px;
|
|
22
22
|
font-weight: 500;
|
|
23
23
|
line-height: 20px;
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
& .sheerly-accordion-content {
|
|
63
|
-
font-family:
|
|
63
|
+
font-family: var(--sheerly-font-sans);
|
|
64
64
|
font-size: 14px;
|
|
65
65
|
font-weight: 400;
|
|
66
66
|
line-height: 20px;
|
package/src/alert.css
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
background-color: var(--sheerly-card);
|
|
26
26
|
color: var(--sheerly-card-foreground);
|
|
27
27
|
box-shadow: 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);
|
|
28
|
-
font-family:
|
|
28
|
+
font-family: var(--sheerly-font-sans);
|
|
29
29
|
font-size: 14px;
|
|
30
30
|
line-height: 20px;
|
|
31
31
|
text-align: left;
|
package/src/avatar.css
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
justify-content: center;
|
|
43
43
|
border-radius: var(--sheerly-radius-full);
|
|
44
44
|
background-color: var(--sheerly-muted);
|
|
45
|
-
font-family:
|
|
45
|
+
font-family: var(--sheerly-font-sans);
|
|
46
46
|
font-size: 14px;
|
|
47
47
|
font-weight: 500;
|
|
48
48
|
color: var(--sheerly-muted-foreground);
|
package/src/badge.css
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
border-radius: var(--sheerly-radius-full);
|
|
11
11
|
border: 1px solid transparent;
|
|
12
12
|
padding: 2px 8px;
|
|
13
|
-
font-family:
|
|
13
|
+
font-family: var(--sheerly-font-sans);
|
|
14
14
|
font-size: 12px;
|
|
15
15
|
font-weight: 500;
|
|
16
16
|
line-height: 16px;
|
package/src/breadcrumb.css
CHANGED
package/src/breadcrumb.tsx
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ElementType } from 'react'
|
|
2
2
|
import { cn } from './utils/cn'
|
|
3
3
|
import type { PolymorphicProps } from './utils/polymorphic'
|
|
4
4
|
|
|
5
|
+
export type BreadcrumbProps<T extends ElementType = 'nav'> = PolymorphicProps<T>
|
|
6
|
+
|
|
5
7
|
/**
|
|
6
8
|
* A path hierarchy of links.
|
|
7
9
|
*
|
|
10
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `nav`).
|
|
11
|
+
*
|
|
8
12
|
* @example
|
|
9
13
|
* <Breadcrumb>
|
|
10
14
|
* <BreadcrumbList>
|
|
@@ -14,9 +18,14 @@ import type { PolymorphicProps } from './utils/polymorphic'
|
|
|
14
18
|
* </BreadcrumbList>
|
|
15
19
|
* </Breadcrumb>
|
|
16
20
|
*/
|
|
17
|
-
export function Breadcrumb
|
|
21
|
+
export function Breadcrumb<T extends ElementType = 'nav'>({
|
|
22
|
+
as,
|
|
23
|
+
className,
|
|
24
|
+
...props
|
|
25
|
+
}: BreadcrumbProps<T>) {
|
|
26
|
+
const Tag = as ?? 'nav'
|
|
18
27
|
return (
|
|
19
|
-
<
|
|
28
|
+
<Tag
|
|
20
29
|
aria-label="breadcrumb"
|
|
21
30
|
className={cn('sheerly-breadcrumb', className)}
|
|
22
31
|
{...props}
|
|
@@ -24,20 +33,54 @@ export function Breadcrumb({ className, ...props }: HTMLAttributes<HTMLElement>)
|
|
|
24
33
|
)
|
|
25
34
|
}
|
|
26
35
|
|
|
27
|
-
export
|
|
28
|
-
|
|
36
|
+
export type BreadcrumbListProps<T extends ElementType = 'ol'> = PolymorphicProps<T>
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `ol`).
|
|
40
|
+
*/
|
|
41
|
+
export function BreadcrumbList<T extends ElementType = 'ol'>({
|
|
42
|
+
as,
|
|
43
|
+
className,
|
|
44
|
+
...props
|
|
45
|
+
}: BreadcrumbListProps<T>) {
|
|
46
|
+
const Tag = as ?? 'ol'
|
|
47
|
+
return <Tag className={cn('sheerly-breadcrumb-list', className)} {...props} />
|
|
29
48
|
}
|
|
30
49
|
|
|
31
|
-
export
|
|
32
|
-
|
|
50
|
+
export type BreadcrumbItemProps<T extends ElementType = 'li'> = PolymorphicProps<T>
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `li`).
|
|
54
|
+
*/
|
|
55
|
+
export function BreadcrumbItem<T extends ElementType = 'li'>({
|
|
56
|
+
as,
|
|
57
|
+
className,
|
|
58
|
+
...props
|
|
59
|
+
}: BreadcrumbItemProps<T>) {
|
|
60
|
+
const Tag = as ?? 'li'
|
|
61
|
+
return <Tag className={cn('sheerly-breadcrumb-item', className)} {...props} />
|
|
33
62
|
}
|
|
34
63
|
|
|
35
|
-
export
|
|
36
|
-
|
|
64
|
+
export type BreadcrumbLinkProps<T extends ElementType = 'a'> = PolymorphicProps<T>
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `a`, e.g.
|
|
68
|
+
* `as={Link}` for a router link).
|
|
69
|
+
*/
|
|
70
|
+
export function BreadcrumbLink<T extends ElementType = 'a'>({
|
|
71
|
+
as,
|
|
72
|
+
className,
|
|
73
|
+
...props
|
|
74
|
+
}: BreadcrumbLinkProps<T>) {
|
|
75
|
+
const Tag = as ?? 'a'
|
|
76
|
+
return <Tag className={cn('sheerly-breadcrumb-link', className)} {...props} />
|
|
37
77
|
}
|
|
38
78
|
|
|
39
79
|
export type BreadcrumbPageProps<T extends ElementType = 'span'> = PolymorphicProps<T>
|
|
40
80
|
|
|
81
|
+
/**
|
|
82
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
|
|
83
|
+
*/
|
|
41
84
|
export function BreadcrumbPage<T extends ElementType = 'span'>({
|
|
42
85
|
as,
|
|
43
86
|
className,
|
|
@@ -55,29 +98,35 @@ export function BreadcrumbPage<T extends ElementType = 'span'>({
|
|
|
55
98
|
)
|
|
56
99
|
}
|
|
57
100
|
|
|
58
|
-
export
|
|
101
|
+
export type BreadcrumbSeparatorProps<T extends ElementType = 'li'> = PolymorphicProps<T>
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `li`).
|
|
105
|
+
*/
|
|
106
|
+
export function BreadcrumbSeparator<T extends ElementType = 'li'>({
|
|
107
|
+
as,
|
|
59
108
|
className,
|
|
60
|
-
children,
|
|
61
109
|
...props
|
|
62
|
-
}:
|
|
110
|
+
}: BreadcrumbSeparatorProps<T>) {
|
|
111
|
+
const Tag = as ?? 'li'
|
|
63
112
|
return (
|
|
64
|
-
<
|
|
113
|
+
<Tag
|
|
65
114
|
role="presentation"
|
|
66
115
|
aria-hidden="true"
|
|
67
116
|
className={cn('sheerly-breadcrumb-separator', className)}
|
|
68
117
|
{...props}
|
|
69
|
-
|
|
70
|
-
{children}
|
|
71
|
-
</li>
|
|
118
|
+
/>
|
|
72
119
|
)
|
|
73
120
|
}
|
|
74
121
|
|
|
75
122
|
export type BreadcrumbEllipsisProps<T extends ElementType = 'span'> = PolymorphicProps<T>
|
|
76
123
|
|
|
124
|
+
/**
|
|
125
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
|
|
126
|
+
*/
|
|
77
127
|
export function BreadcrumbEllipsis<T extends ElementType = 'span'>({
|
|
78
128
|
as,
|
|
79
129
|
className,
|
|
80
|
-
children,
|
|
81
130
|
...props
|
|
82
131
|
}: BreadcrumbEllipsisProps<T>) {
|
|
83
132
|
const Tag = as ?? 'span'
|
|
@@ -88,8 +137,6 @@ export function BreadcrumbEllipsis<T extends ElementType = 'span'>({
|
|
|
88
137
|
aria-label="More"
|
|
89
138
|
className={cn('sheerly-breadcrumb-ellipsis', className)}
|
|
90
139
|
{...props}
|
|
91
|
-
|
|
92
|
-
{children}
|
|
93
|
-
</Tag>
|
|
140
|
+
/>
|
|
94
141
|
)
|
|
95
142
|
}
|
package/src/button.css
CHANGED
package/src/card.css
CHANGED
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.sheerly-card-title {
|
|
55
|
-
font-family:
|
|
55
|
+
font-family: var(--sheerly-font-sans);
|
|
56
56
|
font-size: 16px;
|
|
57
57
|
font-weight: 500;
|
|
58
58
|
line-height: 1.3;
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.sheerly-card-description {
|
|
64
|
-
font-family:
|
|
64
|
+
font-family: var(--sheerly-font-sans);
|
|
65
65
|
font-size: 14px;
|
|
66
66
|
font-weight: 400;
|
|
67
67
|
line-height: 20px;
|
package/src/dialog.css
CHANGED
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
.sheerly-dialog-title {
|
|
89
|
-
font-family:
|
|
89
|
+
font-family: var(--sheerly-font-sans);
|
|
90
90
|
font-size: 16px;
|
|
91
91
|
font-weight: 500;
|
|
92
92
|
line-height: 1;
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
.sheerly-dialog-description {
|
|
99
|
-
font-family:
|
|
99
|
+
font-family: var(--sheerly-font-sans);
|
|
100
100
|
font-size: 14px;
|
|
101
101
|
font-weight: 400;
|
|
102
102
|
line-height: 20px;
|
package/src/dropdown-menu.css
CHANGED
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
inset 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%),
|
|
77
77
|
0 4px 16px -4px oklch(0 0 0 / 8%),
|
|
78
78
|
0 1px 2px oklch(0 0 0 / 4%);
|
|
79
|
-
font-family:
|
|
79
|
+
font-family: var(--sheerly-font-sans);
|
|
80
80
|
font-size: 14px;
|
|
81
81
|
line-height: 20px;
|
|
82
82
|
overflow-x: hidden;
|