@ciridae/ui 0.2.4 → 0.3.0

package/dist/components/ui/app-shell-page.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { PageHeader } from "@ciridae/ui/page-header";
+type AppShellPageBrand = {
+    name: string;
+    iconLight: string;
+    iconDark?: string;
+};
+type AppShellPageProps = React.ComponentProps<"div">;
+type AppShellPageHeaderProps = Omit<React.ComponentProps<typeof PageHeader>, "children"> & {
+    actions?: React.ReactNode;
+    description?: React.ReactNode;
+    title: React.ReactNode;
+};
+type AppShellWelcomeProps = Omit<React.ComponentProps<"div">, "title"> & {
+    brand?: AppShellPageBrand;
+    description?: React.ReactNode;
+    title: React.ReactNode;
+};
+declare function AppShellPage({ className, ...props }: AppShellPageProps): React.JSX.Element;
+declare function AppShellPageHeader({ actions, className, description, title, ...props }: AppShellPageHeaderProps): React.JSX.Element;
+declare function AppShellWelcome({ brand, children, className, description, title, ...props }: AppShellWelcomeProps): React.JSX.Element;
+export { AppShellPage, type AppShellPageBrand, AppShellPageHeader, type AppShellPageHeaderProps, type AppShellPageProps, AppShellWelcome, type AppShellWelcomeProps, };

package/dist/components/ui/app-shell-page.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "@ciridae/ui/utils";
+import { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderMain, PageHeaderTitle, } from "@ciridae/ui/page-header";
+import { SidebarTrigger } from "@ciridae/ui/sidebar";
+function AppShellPage({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "app-shell-page", className: cn("flex min-h-0 flex-1 flex-col bg-background text-foreground", className), ...props }));
+}
+function AppShellPageHeader({ actions, className, description, title, ...props }) {
+    return (_jsx(PageHeader, { className: className, ...props, children: _jsxs(PageHeaderMain, { className: "relative pl-14 md:pl-6 lg:pl-8", children: [_jsx(SidebarTrigger, { className: "absolute top-1/2 left-4 -translate-y-1/2 md:hidden" }), _jsxs(PageHeaderContent, { children: [_jsx(PageHeaderTitle, { children: title }), description ? _jsx(PageHeaderDescription, { children: description }) : null] }), actions ? _jsx(PageHeaderActions, { children: actions }) : null] }) }));
+}
+function AppShellWelcome({ brand, children, className, description, title, ...props }) {
+    return (_jsx("div", { "data-slot": "app-shell-welcome", className: cn("flex min-h-0 flex-1 items-center justify-center p-6", className), ...props, children: _jsxs("div", { className: "flex max-w-md flex-col items-center gap-4 text-center", children: [brand ? _jsx(AppShellWelcomeBrand, { brand: brand }) : null, _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("h2", { className: "text-2xl font-heading tracking-normal", children: title }), description ? (_jsx("div", { className: "text-sm text-muted-foreground [&>a]:font-medium [&>a]:text-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-foreground/72", children: description })) : null] }), children] }) }));
+}
+function AppShellWelcomeBrand({ brand }) {
+    return (_jsxs(_Fragment, { children: [_jsx("img", { alt: brand.name, className: "h-24 w-auto dark:hidden", src: brand.iconLight }), brand.iconDark ? (_jsx("img", { alt: brand.name, className: "hidden h-24 w-auto dark:block", src: brand.iconDark })) : null] }));
+}
+export { AppShellPage, AppShellPageHeader, AppShellWelcome, };

package/dist/components/ui/item.d.ts

@@ -11,7 +11,7 @@ declare function Item({ className, variant, size, asChild, ...props }: React.Com
     asChild?: boolean;
 }): React.JSX.Element;
 declare const itemMediaVariants: (props?: ({
-    variant?: "image" | "default" | "icon" | null | undefined;
+    variant?: "default" | "icon" | "image" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
 declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/styled-system/styles.css

@@ -606,6 +606,14 @@
 
 @layer utilities{
 
+  .p_spacing\.4 {
+    padding: spacing.4;
+}
+
+  .p_spacing\.2 {
+    padding: spacing.2;
+}
+
   .anim_pulse {
     animation: var(--animations-pulse);
 }
@@ -614,12 +622,12 @@
     animation: var(--animations-spin);
 }
 
-  .bd-c_transparent {
-    border-color: var(--colors-transparent);
+  .bd-c_border {
+    border-color: var(--colors-border);
 }
 
-  .bdr_badge {
-    border-radius: var(--radii-badge);
+  .bdr_lg {
+    border-radius: var(--radii-lg);
 }
 
   .border-style_solid {
@@ -630,12 +638,72 @@
     border-width: var(--border-widths-default);
 }
 
+  .ov_hidden {
+    overflow: hidden;
+}
+
+  .gap_gap\.3 {
+    gap: gap.3;
+}
+
+  .py_spacing\.3 {
+    padding-block: spacing.3;
+}
+
+  .px_spacing\.4 {
+    padding-inline: spacing.4;
+}
+
   .gap_gap\.1 {
     gap: var(--spacing-gap\.1);
 }
 
-  .ov_hidden {
-    overflow: hidden;
+  .flex_1 {
+    flex: 1 1 0%;
+}
+
+  .ov_auto {
+    overflow: auto;
+}
+
+  .py_spacing\.2 {
+    padding-block: spacing.2;
+}
+
+  .px_spacing\.3 {
+    padding-inline: spacing.3;
+}
+
+  .gap_gap\.2 {
+    gap: gap.2;
+}
+
+  .my_spacing\.4 {
+    margin-block: spacing.4;
+}
+
+  .ring_none {
+    outline: var(--borders-none);
+}
+
+  .bd-w_0 {
+    border-width: 0;
+}
+
+  .px_spacing\.2 {
+    padding-inline: spacing.2;
+}
+
+  .bdr_md {
+    border-radius: var(--radii-md);
+}
+
+  .bd-c_transparent {
+    border-color: var(--colors-transparent);
+}
+
+  .bdr_badge {
+    border-radius: var(--radii-badge);
 }
 
   .py_0\.125rem {
@@ -646,10 +714,6 @@
     padding-inline: var(--spacing-badge\.x);
 }
 
-  .bd-c_border {
-    border-color: var(--colors-border);
-}
-
   .bd-c_success\.border {
     border-color: var(--colors-success\.border);
 }
@@ -666,18 +730,10 @@
     border-color: var(--colors-destructive\.border);
 }
 
-  .bdr_md {
-    border-radius: var(--radii-md);
-}
-
   .gap_control\.gap {
     gap: var(--spacing-control\.gap);
 }
 
-  .ring_none {
-    outline: var(--borders-none);
-}
-
   .px_control\.padding\.x {
     padding-inline: var(--spacing-control\.padding\.x);
 }
@@ -698,22 +754,121 @@
     padding-inline: var(--spacing-control\.padding\.lg);
 }
 
-  .ai_center {
-    align-items: center;
+  .bg-c_card {
+    background-color: card;
 }
 
-  .d_inline-flex {
-    display: inline-flex;
+  .c_card\.foreground {
+    color: card.foreground;
+}
+
+  .d_flex {
+    display: flex;
+}
+
+  .flex-d_column {
+    flex-direction: column;
+}
+
+  .ai_flex-start {
+    align-items: flex-start;
+}
+
+  .jc_space-between {
+    justify-content: space-between;
+}
+
+  .fs_sm {
+    font-size: var(--font-sizes-sm);
+}
+
+  .fw_medium {
+    font-weight: var(--font-weights-medium);
+}
+
+  .tov_ellipsis {
+    text-overflow: ellipsis;
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
+  .c_muted\.foreground {
+    color: muted.foreground;
+}
+
+  .ai_center {
+    align-items: center;
 }
 
   .flex-sh_0 {
     flex-shrink: 0;
 }
 
+  .ff_mono {
+    font-family: var(--fonts-mono);
+}
+
   .fs_xs {
     font-size: var(--font-sizes-xs);
 }
 
+  .bg-c_background {
+    background-color: var(--colors-background);
+}
+
+  .c_foreground {
+    color: var(--colors-foreground);
+}
+
+  .lh_1\.5rem {
+    line-height: 1.5rem;
+}
+
+  .lh_relaxed {
+    line-height: var(--line-heights-relaxed);
+}
+
+  .bx-sh_xs {
+    box-shadow: var(--shadows-xs);
+}
+
+  .d_grid {
+    display: grid;
+}
+
+  .trs-prop_color\,_box-shadow {
+    --transition-prop: color, box-shadow;
+    transition-property: color, box-shadow;
+}
+
+  .ai_stretch {
+    align-items: stretch;
+}
+
+  .bg-c_transparent {
+    background-color: var(--colors-transparent);
+}
+
+  .bx-sh_none {
+    box-shadow: none;
+}
+
+  .trs-prop_color\,_background-color {
+    --transition-prop: color, background-color;
+    transition-property: color, background-color;
+}
+
+  .trs-prop_transform {
+    --transition-prop: transform;
+    transition-property: transform;
+}
+
+  .d_inline-flex {
+    display: inline-flex;
+}
+
   .fw_control {
     font-weight: var(--font-weights-control);
 }
@@ -726,11 +881,6 @@
     line-height: var(--line-heights-xs);
 }
 
-  .trs-prop_color\,_box-shadow {
-    --transition-prop: color, box-shadow;
-    transition-property: color, box-shadow;
-}
-
   .trs-dur_fast {
     --transition-duration: var(--durations-fast);
     transition-duration: var(--durations-fast);
@@ -741,18 +891,10 @@
     transition-timing-function: var(--easings-standard);
 }
 
-  .white-space_nowrap {
-    white-space: nowrap;
-}
-
   .bg-c_muted\.subtle {
     background-color: var(--colors-muted\.subtle);
 }
 
-  .c_foreground {
-    color: var(--colors-foreground);
-}
-
   .bg-c_secondary {
     background-color: var(--colors-secondary);
 }
@@ -801,10 +943,6 @@
     text-underline-offset: 4px;
 }
 
-  .fs_sm {
-    font-size: var(--font-sizes-sm);
-}
-
   .lh_sm {
     line-height: var(--line-heights-sm);
 }
@@ -830,16 +968,84 @@
     color: var(--colors-destructive\.foreground);
 }
 
-  .bg-c_background {
-    background-color: var(--colors-background);
+  .bg-c_accent {
+    background-color: var(--colors-accent);
 }
 
-  .bx-sh_xs {
-    box-shadow: var(--shadows-xs);
+  .h_full {
+    height: var(--sizes-full);
 }
 
-  .bg-c_accent {
-    background-color: var(--colors-accent);
+  .min-h_0 {
+    min-height: var(--sizes-0);
+}
+
+  .w_full {
+    width: var(--sizes-full);
+}
+
+  .bd-b-c_border {
+    border-bottom-color: var(--colors-border);
+}
+
+  .border-bottom-style_solid {
+    border-bottom-style: solid;
+}
+
+  .bd-b-w_default {
+    border-bottom-width: var(--border-widths-default);
+}
+
+  .min-w_0 {
+    min-width: var(--sizes-0);
+}
+
+  .max-h_24rem {
+    max-height: 24rem;
+}
+
+  .min-w_max-content {
+    min-width: max-content;
+}
+
+  .h_control\.sm {
+    height: var(--sizes-control\.sm);
+}
+
+  .min-w_6rem {
+    min-width: 6rem;
+}
+
+  .mt_spacing\.1 {
+    margin-top: spacing.1;
+}
+
+  .max-w_full {
+    max-width: var(--sizes-full);
+}
+
+  .min-h_6rem {
+    min-height: 6rem;
+}
+
+  .h_icon\.sm {
+    height: var(--sizes-icon\.sm);
+}
+
+  .w_icon\.sm {
+    width: var(--sizes-icon\.sm);
+}
+
+  .mt_spacing\.2 {
+    margin-top: spacing.2;
+}
+
+  .h_0\.875rem {
+    height: 0.875rem;
+}
+
+  .w_0\.875rem {
+    width: 0.875rem;
 }
 
   .w_fit-content {
@@ -854,10 +1060,6 @@
     height: var(--sizes-control\.xs);
 }
 
-  .h_control\.sm {
-    height: var(--sizes-control\.sm);
-}
-
   .h_control\.lg {
     height: var(--sizes-control\.lg);
 }
@@ -878,12 +1080,56 @@
     width: var(--sizes-control\.lg);
 }
 
-  .h_icon\.sm {
-    height: var(--sizes-icon\.sm);
+  .\[\&\[data-role\=\'system\'\]\]\:py_spacing\.1[data-role='system'] {
+    padding-block: spacing.1;
 }
 
-  .w_icon\.sm {
-    width: var(--sizes-icon\.sm);
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:bd-c_border {
+    border-color: var(--colors-border);
+}
+
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:bdr_lg {
+    border-radius: var(--radii-lg);
+}
+
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:border-style_solid {
+    border-style: solid;
+}
+
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:bd-w_default {
+    border-width: var(--border-widths-default);
+}
+
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:py_spacing\.3 {
+    padding-block: spacing.3;
+}
+
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:px_spacing\.4 {
+    padding-inline: spacing.4;
+}
+
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:bd-c_border {
+    border-color: var(--colors-border);
+}
+
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:bdr_md {
+    border-radius: var(--radii-md);
+}
+
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:border-style_solid {
+    border-style: solid;
+}
+
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:bd-w_default {
+    border-width: var(--border-widths-default);
+}
+
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:py_spacing\.2 {
+    padding-block: spacing.2;
+}
+
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:px_spacing\.3 {
+    padding-inline: spacing.3;
 }
 
   .\[\&\[aria-invalid\=\'true\'\]\]\:bd-c_destructive[aria-invalid='true'] {
@@ -926,6 +1172,68 @@
     padding-inline: var(--spacing-control\.with-icon\.lg);
 }
 
+  .\[\&_pre\]\:bg-c_transparent\! pre {
+    background-color: var(--colors-transparent) !important;
+}
+
+  .\[\&\[data-role\=\'user\'\]\]\:ai_flex-end[data-role='user'] {
+    align-items: flex-end;
+}
+
+  .\[\&\[data-role\=\'assistant\'\]\]\:ai_flex-start[data-role='assistant'],.\[\&\[data-role\=\'system\'\]\]\:ai_flex-start[data-role='system'] {
+    align-items: flex-start;
+}
+
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:bg-c_secondary {
+    background-color: var(--colors-secondary);
+}
+
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:bx-sh_xs {
+    box-shadow: var(--shadows-xs);
+}
+
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:c_secondary\.foreground {
+    color: var(--colors-secondary\.foreground);
+}
+
+  .group\/message[data-role='assistant'] .\[\.group\\\/message\[data-role\=\'assistant\'\]_\&\]\:c_foreground {
+    color: var(--colors-foreground);
+}
+
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:bg-c_muted\/30 {
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-muted) 30%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-muted));
+}
+
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:c_muted\.foreground {
+    color: muted.foreground;
+}
+
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:fs_xs {
+    font-size: var(--font-sizes-xs);
+}
+
+  .\[\&\[data-disabled\=\'true\'\]\]\:op_0\.6[data-disabled='true'] {
+    opacity: 0.6;
+}
+
+  .dark .dark\:bg-c_transparent {
+    background-color: var(--colors-transparent);
+}
+
+  .\[\&\:\:placeholder\]\:c_muted\.foreground\/70::placeholder {
+    --mix-color: color-mix(in srgb, muted.foreground 70%, transparent);
+    color: var(--mix-color, muted.foreground);
+}
+
+  .group[data-state='open'] .\[\.group\[data-state\=\'open\'\]_\&\]\:trf_rotate\(180deg\) {
+    transform: rotate(180deg);
+}
+
+  .\[\&\[data-state\=\'closed\'\]\]\:anim-n_fade-out[data-state='closed'] {
+    animation-name: fade-out;
+}
+
   .\[\&\[aria-invalid\=\'true\'\]\]\:bx-sh_focus\.destructive[aria-invalid='true'] {
     box-shadow: var(--shadows-focus\.destructive);
 }
@@ -962,6 +1270,18 @@
     background-color: var(--colors-input\.subtle);
 }
 
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:ml_auto {
+    margin-left: auto;
+}
+
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:max-w_full {
+    max-width: var(--sizes-full);
+}
+
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:max-w_min\(34rem\,_78\%\) {
+    max-width: min(34rem, 78%);
+}
+
   .\[\&_\>_svg\]\:h_icon\.xs > svg {
     height: var(--sizes-icon\.xs);
 }
@@ -986,6 +1306,18 @@
     width: var(--sizes-icon\.xs);
 }
 
+  .\[\&\:focus-within\]\:bd-c_ring:focus-within {
+    border-color: var(--colors-ring);
+}
+
+  .\[\&\:focus-within\]\:bx-sh_focus:focus-within {
+    box-shadow: var(--shadows-focus);
+}
+
+  .\[\&\:focus-visible\]\:ring_none:focus-visible {
+    outline: var(--borders-none);
+}
+
   .\[\&\:focus-visible\]\:bd-c_ring:focus-visible {
     border-color: var(--colors-ring);
 }
@@ -1010,6 +1342,14 @@
     box-shadow: var(--shadows-focus\.destructive);
 }
 
+  .\[\&\:hover\]\:bg-c_accent:hover {
+    background-color: var(--colors-accent);
+}
+
+  .\[\&\:hover\]\:c_accent\.foreground:hover {
+    color: var(--colors-accent\.foreground);
+}
+
   a.\[a\&\:hover\]\:bg-c_accent:hover {
     background-color: var(--colors-accent);
 }
@@ -1034,14 +1374,6 @@
     background-color: var(--colors-destructive\.hover);
 }
 
-  .\[\&\:hover\]\:bg-c_accent:hover {
-    background-color: var(--colors-accent);
-}
-
-  .\[\&\:hover\]\:c_accent\.foreground:hover {
-    color: var(--colors-accent\.foreground);
-}
-
   .\[\&\:hover\]\:bg-c_secondary\.hover:hover {
     background-color: var(--colors-secondary\.hover);
 }

package/dist/styles.css

@@ -0,0 +1,2 @@
+@source "./**/*.{js,mjs}";
+@import "./styled-system/styles.css";