@once-ui-system/core 1.7.11 → 1.7.13

package/ai/examples/blocks/Header4.tsx

@@ -0,0 +1,123 @@
+import { Row, Logo, IconButton, UserMenu, Column, Icon, Option, Line, SmartLink, Text, ToggleButton } from "@once-ui-system/core"
+
+interface HeaderProps extends React.ComponentProps<typeof Row> {
+  cartCount?: number;
+}
+
+export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
+  return (
+    <Row
+      as="header"
+      paddingY="8"
+      paddingLeft="20"
+      paddingRight="32"
+      fillWidth
+      vertical="center"
+      horizontal="between"
+      {...flex}
+    >
+      <Row gap="24">
+        <Logo href="#" dark icon="/trademarks/icon-dark.svg" />
+        <Logo href="#" light icon="/trademarks/icon-light.svg" />
+        <Row gap="8">
+          <ToggleButton label="All products"/>
+          <ToggleButton label="Trending"/>
+          <ToggleButton label="New"/>
+          <ToggleButton label="On sale"/>
+        </Row>
+      </Row>
+      <Row gap="24" paddingY="2" vertical="center">
+        <Row>
+          <IconButton
+            data-border="rounded"
+            variant="ghost"
+            tooltip="Cart"
+            tooltipPosition="bottom"
+            icon="cart"
+          />
+          {cartCount > 0 && (
+            <Row
+              data-scaling="90"
+              position="absolute"
+              vertical="center"
+              horizontal="center"
+              textVariant="body-default-xs"
+              solid="brand-strong"
+              onSolid="brand-strong"
+              radius="full"
+              minWidth="20"
+              height="20"
+              border="neutral-weak"
+              style={{
+                top: "-0.125rem",
+                right: "-0.5rem",
+              }}
+            >
+              {cartCount}
+            </Row>
+          )}
+        </Row>
+        <UserMenu
+          placement="bottom-end"
+          avatarProps={{ src: "/images/creators/lorant.jpg" }}
+          dropdown={[
+            <Column key="cart" padding="4" gap="2" fitWidth>
+              <Option
+                key="cart-option"
+                label="Cart"
+                value="cart"
+                hasPrefix={
+                  <Icon
+                    size="xs"
+                    onBackground="neutral-weak"
+                    name="cart"
+                  />
+                }
+              />
+              <Line key="line-1" marginY="2" />
+              <Option
+                key="order-history-option"
+                label="Order history"
+                value="orders"
+                hasPrefix={
+                  <Icon size="xs" onBackground="neutral-weak" name="payment" />
+                }
+              />
+              <Option
+                key="returned-orders-option"
+                label="Returned orders"
+                value="returns"
+                hasPrefix={
+                  <Icon size="xs" onBackground="neutral-weak" name="return" />
+                }
+              />
+              <Line key="line-2" marginY="2" />
+              <Option
+                key="settings-option"
+                label="Settings"
+                hasPrefix={
+                  <Icon size="xs" onBackground="neutral-weak" name="settings" />
+                }
+                value="settings"
+              />
+              <Option
+                key="help-option"
+                label="Help"
+                hasPrefix={<Icon size="xs" onBackground="neutral-weak" name="help" />}
+                value="help"
+              />
+              <Line key="line-3" marginY="2" />
+              <Row padding="4" fillWidth horizontal="center">
+                <SmartLink href="#">
+                  <Text onBackground="neutral-weak" variant="body-default-xs">
+                    Terms of Use
+                  </Text>
+                </SmartLink>
+              </Row>
+            </Column>
+          ]}
+        />
+      </Row>
+    </Row>   
+  )
+}

package/ai/examples/blocks/Productivity1.tsx

@@ -0,0 +1,318 @@
+import {
+  Row,
+  Icon,
+  IconButton,
+  Button,
+  Text,
+  AvatarGroup,
+  Column,
+  Card,
+} from "@once-ui-system/core";
+import { Sidebar2 } from "./Sidebar2";
+
+const issues = [
+  {
+    title: "To do",
+    tasks: [
+      {
+        title: "Fix login bug",
+        description: "Implement new authentication flow with OAuth2",
+        assignee: { avatars: ["/images/avatars/07.png"] },
+        project: "Frontend",
+        issuetype: "Bug",
+        issueColor: "danger-strong",
+      },
+      {
+        title: "Design new UI",
+        description: "Add responsive layouts and improve mobile experience",
+        assignee: { avatars: ["/images/avatars/08.png"] },
+        project: "Frontend",
+        issuetype: "Feature",
+        issueColor: "brand-strong",
+      },
+      {
+        title: "Update database schema",
+        description: "Create comprehensive test suite for authentication system",
+        assignee: {
+          avatars: ["/images/avatars/05.png", "/images/avatars/04.png"],
+        },
+        project: "Backend",
+        issuetype: "Feature",
+        issueColor: "brand-strong",
+      },
+    ],
+  },
+  {
+    title: "In progress",
+    tasks: [
+      {
+        title: "Write unit tests",
+        description: "Integrate and test Stripe payment processing",
+        assignee: { avatars: ["/images/avatars/05.png"] },
+        project: "Backend",
+        issuetype: "Tech",
+        issueColor: "accent-strong",
+      },
+      {
+        title: "Test payment gateway",
+        description: "Implement code splitting and lazy loading",
+        assignee: { avatars: ["/images/avatars/02.png"] },
+        project: "Frontend",
+        issuetype: "Bug",
+        issueColor: "danger-strong",
+      },
+      {
+        title: "Optimize performance",
+        description: "Configure 2FA and update password policies",
+        assignee: { avatars: ["/images/avatars/01.png"] },
+        project: "Frontend",
+        issuetype: "Feature",
+        issueColor: "brand-strong",
+      },
+      {
+        title: "Update security settings",
+        description: "Design and implement user onboarding wizard",
+        assignee: {
+          avatars: ["/images/avatars/06.png", "/images/avatars/05.png"],
+        },
+        project: "Backend",
+        issuetype: "Feature",
+        issueColor: "brand-strong",
+      },
+      {
+        title: "Complete onboarding flow",
+        description: "Fix responsive layout issues on mobile devices",
+        assignee: { avatars: ["/images/avatars/04.png"] },
+        project: "Website",
+        issuetype: "Feature",
+        issueColor: "brand-strong",
+      },
+      {
+        title: "Fix CSS issues",
+        description: "Set up AWS infrastructure and deploy application",
+        assignee: {
+          avatars: ["/images/avatars/03.png", "/images/avatars/02.png"],
+        },
+        project: "Frontend",
+        issuetype: "Bug",
+        issueColor: "danger-strong",
+      },
+    ],
+  },
+  {
+    title: "Done",
+    tasks: [
+      {
+        title: "Deploy to production",
+        description: "Update API documentation and usage examples",
+        assignee: { avatars: ["/images/avatars/02.png"] },
+        project: "Backend",
+        issuetype: "Feature",
+        issueColor: "brand-strong",
+      },
+      {
+        title: "Update documentation",
+        description: "Set up automated testing and deployment workflow",
+        assignee: { avatars: ["/images/avatars/03.png"] },
+        project: "Frontend",
+        issuetype: "Bug",
+        issueColor: "danger-strong",
+      },
+      {
+        title: "Implement CI/CD pipeline",
+        description: "Configure Jenkins pipeline with automated testing",
+        assignee: {
+          avatars: ["/images/avatars/02.png", "/images/avatars/07.png"],
+        },
+        project: "Platform",
+        issuetype: "Tech",
+        issueColor: "accent-strong",
+      },
+      {
+        title: "Implement CI/CD pipeline",
+        description: "Configure Jenkins pipeline with automated testing",
+        assignee: {
+          avatars: ["/images/avatars/02.png", "/images/avatars/07.png"],
+        },
+        project: "Platform",
+        issuetype: "Tech",
+        issueColor: "accent-strong",
+      },
+    ],
+  },
+];
+
+export const Productivity1 = () => {
+  return (
+    <Row fillWidth paddingX="8" gap="m">
+      <Sidebar2 position="sticky"/>
+      <Column fillWidth>
+        <Row
+          as="header"
+          paddingY="12"
+          paddingLeft="16"
+          paddingRight="8"
+          fillWidth
+          vertical="center"
+          horizontal="between"
+        >
+          <Row fillWidth>
+            <Text variant="body-strong-m" onBackground="neutral-strong">
+              Platform Squad
+            </Text>
+          </Row>
+          <Row gap="12" vertical="center" horizontal="end" fillWidth zIndex={1}>
+            <IconButton
+              data-border="rounded"
+              variant="ghost"
+              tooltip="Search"
+              tooltipPosition="bottom"
+              icon="search"
+            />
+            <Row>
+              <IconButton
+                data-border="rounded"
+                variant="ghost"
+                tooltip="Notifications"
+                tooltipPosition="bottom"
+                icon="bell"
+              />
+              <Row
+                position="absolute"
+                style={{
+                  top: "0.15rem",
+                  right: "0.15rem",
+                }}
+              >
+                <Row
+                  style={{ borderColor: "var(--page-background)" }}
+                  height="12"
+                  width="12"
+                  solid="brand-strong"
+                  radius="full"
+                />
+              </Row>
+            </Row>
+            <div
+              style={{
+                width: "1px",
+                margin: "0 var(--static-space-8)",
+                height: "1.5rem",
+                backgroundColor: "var(--neutral-border-medium",
+              }}
+            ></div>
+            <Button size="s" variant="secondary" label="New project" prefixIcon="plus" />
+          </Row>
+        </Row>
+        <Row
+          fillWidth
+          paddingBottom="12"
+          paddingRight="8"
+          paddingLeft="16"
+          horizontal="between"
+        >
+          <AvatarGroup
+            avatars={[
+              { src: "/images/avatars/01.png", size: "s" },
+              { src: "/images/avatars/02.png", size: "s" },
+              { src: "/images/avatars/03.png", size: "s" },
+              { src: "/images/avatars/04.png", size: "s" },
+              { src: "/images/avatars/05.png", size: "s" },
+              { value: "3", size: "s" },
+            ]}
+            reverse
+          />
+          <Row gap="8" s={{hide: true}}>
+            <Button variant="tertiary" size="s" label="Filter" prefixIcon="trend" />
+            <Button
+              variant="tertiary"
+              size="s"
+              label="Display"
+              prefixIcon="adjustments"
+            />
+          </Row>
+        </Row>
+        <Row fillWidth gap="8" overflowX="auto">
+          {issues.map((column, index) => (
+            <Column
+              key={index}
+              minWidth={20}
+              border="neutral-alpha-weak"
+              fillWidth
+              paddingX="4"
+              radius="m-4"
+              background="overlay"
+            >
+              <Row paddingY="8" paddingX="12" fillWidth horizontal="between">
+                <Row textVariant="body-default-s" gap="8" vertical="center">
+                  <Text>{column.title}</Text>
+                  <Text onBackground="neutral-weak">{column.tasks.length}</Text>
+                </Row>
+                <Row gap="4">
+                  <IconButton
+                    data-border="rounded"
+                    variant="ghost"
+                    tooltip="More actions"
+                    size="s"
+                    tooltipPosition="left"
+                    icon="moreHorizontal"
+                  />
+                  <IconButton
+                    data-border="rounded"
+                    variant="ghost"
+                    tooltip="Add task"
+                    size="s"
+                    tooltipPosition="left"
+                    icon="plus"
+                  />
+                </Row>
+              </Row>
+              {column.tasks.map((task, index) => (
+                <Card
+                  key={index}
+                  fillWidth
+                  direction="column"
+                  radius="m"
+                  padding="12"
+                  gap="8"
+                  marginBottom="4"
+                >
+                  <Row horizontal="between" vertical="center">
+                    <Text variant="label-default-s">{task.title}</Text>
+                    <AvatarGroup
+                      avatars={task.assignee.avatars.map((src) => ({ src, size: "xs" }))}
+                    />
+                  </Row>
+                  <Text onBackground="neutral-weak" variant="label-default-s">
+                    {task.description}
+                  </Text>
+                  <Row gap="4" paddingTop="8" vertical="center" horizontal="between">
+                    <Row vertical="center" fillWidth gap="8">
+                      <Icon name="code" size="xs" />
+                      <Text variant="body-default-xs" onBackground="neutral-weak">
+                        {task.project}
+                      </Text>
+                    </Row>
+                    <Row vertical="center" gap="8" paddingRight="4">
+                      <Text variant="body-default-xs" onBackground="neutral-weak">
+                        {task.issuetype}
+                      </Text>
+                      <Row
+                        radius="full"
+                        height="8"
+                        width="8"
+                        solid={
+                          task.issueColor as "brand-strong" | "accent-strong" | "danger-strong"
+                        }
+                      />
+                    </Row>
+                  </Row>
+                </Card>
+              ))}
+            </Column>
+          ))}
+        </Row>
+      </Column>
+    </Row>
+  );
+};

package/ai/examples/blocks/Roadmap1.tsx

@@ -0,0 +1,133 @@
+import { Card, Column, Heading, Row, Schemes, StatusIndicator, Text, User } from "@once-ui-system/core";
+import { roadmap, task } from "./content/roadmap1content";
+
+export interface Task {
+  title: string;
+  description?: string;
+  user?: {
+    name?: string;
+    avatar?: string;
+  };
+  href?: string;
+  type?: keyof typeof task;
+}
+
+const RoadmapTask = ({ task: taskItem }: { task: Task }) => (
+  <Column gap="8" fillWidth>
+    <Text align="left" onBackground="neutral-strong" variant="body-strong-m">
+      {taskItem.title}
+    </Text>
+    
+    {taskItem.description && (
+      <Text align="left" variant="body-default-s" onBackground="neutral-weak">
+        {taskItem.description}
+      </Text>
+    )}
+    
+    {(taskItem.user || taskItem.type) && (
+        <Row marginTop="8" fillWidth vertical="center" horizontal="between">
+          {taskItem.user && (
+            <User
+              avatarProps={{ 
+                size: "s",
+                src: taskItem.user.avatar,
+                empty: !taskItem.user.avatar
+            }}
+          >
+            <Row paddingLeft="4" textVariant="label-default-s">
+              {taskItem.user.name}
+            </Row>
+          </User>
+        )}
+        {taskItem.type && (
+          <Row vertical="center" gap="8">
+            <StatusIndicator 
+              color={task[taskItem.type].color as Schemes}
+            />
+            <Text onBackground="neutral-weak" variant="label-default-s">{task[taskItem.type].label}</Text>
+          </Row>
+        )}
+      </Row>
+    )}
+  </Column>
+);
+
+export function Roadmap1() {
+  return (
+    <Column maxWidth="l" as="main">
+      <Column fillWidth gap="12" paddingBottom="l" paddingX="8">
+        <Heading variant="display-strong-s">
+          Roadmap
+        </Heading>
+        <Text wrap="balance" onBackground="neutral-weak" variant="body-default-xl" marginBottom="20">
+          List of features planned for Q4 2025
+        </Text>
+      </Column>
+
+      {roadmap.map((product, productIndex) => (
+        <Column key={productIndex} gap="24" marginTop={productIndex > 0 ? "48" : "0"} fillWidth>
+          {product.product && (
+            <Row gap="16" marginBottom="16" vertical="center" fillWidth>
+              <Row minWidth="40" width="40" height="40" padding="8" vertical="center">
+                <Row radius="full" fillWidth minHeight="4" solid="brand-medium" data-brand={product.brand as Schemes} data-solid="inverse"/>
+              </Row>
+              <Heading as="h2" variant="display-default-xs">
+                {product.product}
+              </Heading>
+            </Row>
+          )}
+          
+          <Row gap="4" fillWidth overflowX="auto" paddingBottom="16">
+            {product.columns.map((column, columnIndex) => (
+              <Column key={columnIndex} padding="4" gap="4" radius="s-4" border="neutral-alpha-weak" background="overlay" fillWidth minWidth={20}>
+                <Row fillWidth vertical="center" gap="8" paddingY="8" paddingX="16">
+                  <Text variant="label-default-m">
+                    {column.title}
+                  </Text>
+                  <Text variant="label-default-s" onBackground="neutral-weak">
+                    {column.tasks.length}
+                  </Text>
+                </Row>
+                
+                <Column gap="4" fillWidth>
+                  {column.tasks.map((taskItem, taskIndex) => {
+                    const typedTask: Task = {
+                      ...taskItem,
+                      type: taskItem.type as keyof typeof task
+                    };
+                    
+                    return typedTask.href ? (
+                      <Card
+                        onBackground="neutral-strong"
+                        border="neutral-alpha-weak"
+                        fillWidth
+                        radius="s"
+                        key={taskIndex} 
+                        href={typedTask.href}
+                        padding="16"
+                      >
+                        <RoadmapTask task={typedTask} />
+                      </Card>
+                    ) : (
+                      <Column
+                        onBackground="neutral-strong"
+                        border="neutral-alpha-weak"
+                        fillWidth
+                        radius="s"
+                        key={taskIndex}
+                        padding="16"
+                        gap="8"
+                      >
+                        <RoadmapTask task={typedTask} />
+                      </Column>
+                    );
+                  })}
+                </Column>
+              </Column>
+            ))}
+          </Row>
+        </Column>
+      ))}
+    </Column>
+  );
+}

package/ai/examples/blocks/Sidebar1.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Column, Row, Text, ToggleButton } from "@once-ui-system/core";
+
+const nav = [
+  { label: "Overview", href: "#" },
+  { label: "Analytics", href: "#" },
+  { label: "Orders", href: "#" },
+  { label: "Customers", href: "#" },
+  { label: "Settings", href: "#" },
+];
+
+/** App sidebar shell — compose with Header1 + Table1 in Dashboard1 */
+export const Sidebar1: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }) => (
+  <Column
+    fillHeight
+    maxWidth={18}
+    background="surface"
+    borderRight="neutral-alpha-weak"
+    padding="8"
+    gap="4"
+    {...flex}
+  >
+    <Text variant="label-default-s" onBackground="neutral-weak" padding="12">
+      Dashboard
+    </Text>
+    {nav.map((item) => (
+      <ToggleButton key={item.label} fillWidth horizontal="start">
+        {item.label}
+      </ToggleButton>
+    ))}
+    <Row flex={1} />
+  </Column>
+);

package/ai/examples/blocks/Sidebar2.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { Column, Text, ToggleButton } from "@once-ui-system/core";
+
+/** Productivity sidebar — minimal stub for Productivity1 reference */
+export const Sidebar2: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }) => (
+  <Column fillHeight maxWidth={18} background="surface" borderRight="neutral-alpha-weak" padding="8" gap="4" {...flex}>
+    <Text variant="label-default-s" onBackground="neutral-weak" padding="12">
+      Workspace
+    </Text>
+    {["Inbox", "Today", "Upcoming", "Projects"].map((label) => (
+      <ToggleButton key={label} fillWidth horizontal="start">
+        {label}
+      </ToggleButton>
+    ))}
+  </Column>
+);