@once-ui-system/core 1.7.11 → 1.7.12

package/ai/examples/blocks/Table1.tsx

@@ -0,0 +1,303 @@
+"use client";
+
+import { Checkbox, Column, IconButton, Input, Row, Text, Card, Icon, DropdownWrapper, Button, ToggleButton, CountFx } from "@once-ui-system/core";
+import { useEffect, useMemo, useState } from "react";
+
+type Align = "start" | "center" | "end";
+
+export type TableColumn<T = any> = {
+  key: string;
+  title: React.ReactNode;
+  render: (item: T, index: number) => React.ReactNode;
+  align?: Align;
+  width?: number; // in grid columns (optional)
+};
+
+export type Table1Props<T = any> = React.ComponentProps<typeof Column> & {
+  data: T[];
+  columns: TableColumn<T>[];
+  selectable?: boolean;
+  getId?: (item: T, index: number) => string;
+  itemsPerPageOptions?: number[];
+  initialItemsPerPage?: number;
+  heading?: React.ReactNode;
+  showSearch?: boolean;
+  filterFn?: (item: T, query: string) => boolean;
+  onSelectionChange?: (ids: Set<string>) => void;
+};
+
+export const Table1: React.FC<Table1Props> = ({
+  data,
+  columns,
+  selectable = false,
+  getId,
+  itemsPerPageOptions = [5, 25, 50, 100],
+  initialItemsPerPage = 5,
+  heading = "Items",
+  showSearch = true,
+  filterFn,
+  onSelectionChange,
+  ...flex
+}) => {
+
+  const [itemsPerPage, setItemsPerPage] = useState(initialItemsPerPage);
+  const [search, setSearch] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedItems, setSelectedItems] = useState(new Set<string>());
+
+  // Filter by search
+  const filteredContent = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return data;
+    if (filterFn) return data.filter((item) => filterFn(item, q));
+    // Default fallback filter: stringify
+    return data.filter((item) => JSON.stringify(item).toLowerCase().includes(q));
+  }, [search, data, filterFn]);
+
+  // Pagination calculations
+  const totalitemsPerPage = Math.max(1, Math.ceil(filteredContent.length / itemsPerPage));
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const paginatedItems = filteredContent.slice(startIndex, endIndex);
+
+  // Reset to first page when filters or page size change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [search, itemsPerPage]);
+
+  // Selection helpers
+  const resolveId = (item: any, index: number) => (getId ? getId(item, index) : String(index));
+  const isSelected = (id: string) => selectedItems.has(id);
+  const toggleSelect = (id: string) => {
+    setSelectedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      onSelectionChange?.(next);
+      return next;
+    });
+  };
+
+  const currentPageIds = paginatedItems.map((i, idx) => resolveId(i, startIndex + idx));
+  const allCurrentSelected = currentPageIds.length > 0 && currentPageIds.every((id) => selectedItems.has(id));
+  const someCurrentSelected = currentPageIds.some((id) => selectedItems.has(id));
+  const toggleSelectAllCurrent = () => {
+    setSelectedItems((prev) => {
+      const next = new Set(prev);
+      if (allCurrentSelected) {
+        currentPageIds.forEach((id) => next.delete(id));
+      } else {
+        currentPageIds.forEach((id) => next.add(id));
+      }
+      onSelectionChange?.(next);
+      return next;
+    });
+  };
+
+  return (
+    <Column fillWidth radius="l" border="neutral-alpha-weak" {...flex}>
+      <Row fillWidth horizontal="between" paddingY="12" paddingRight="12" paddingLeft="24" gap="16" vertical="center" s={{direction: "column",}}>
+        <Row fillWidth gap="12" vertical="center" horizontal="between">
+          {selectable && someCurrentSelected ? (
+            <CountFx variant="label-default-m" paddingY="12" paddingLeft="8" value={selectedItems.size} effect="smooth" speed={250}>
+              <Text marginLeft="8">selected</Text>
+            </CountFx>
+          ) : (
+            typeof heading === "string" ? (
+              <Text variant="label-default-m" paddingY="12" paddingLeft="8">{heading}</Text>
+            ) : (
+              <Row paddingY="12" paddingLeft="8">{heading}</Row>
+            )
+          )}
+        </Row>
+        {showSearch && (
+          <Row maxWidth={16}>
+            <Input
+              height="s"
+              id="search"
+              placeholder="Search..."
+              value={search}
+              hasPrefix={<Icon name="search" size="s" onBackground="neutral-weak"/>}
+              hasSuffix={search.length > 0 && <IconButton tooltip="Clear" tooltipPosition="left" icon="close" size="s" variant="ghost" onClick={() => setSearch("")}/>}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </Row>
+        )}
+      </Row>
+      <Column fillWidth overflowX="auto">
+        <Column fillWidth radius="l" border="neutral-alpha-weak" overflow="hidden">
+          <Row fillWidth gap="16" paddingX="24" paddingY="12" borderBottom="neutral-alpha-weak">
+            {selectable && (
+              <Row textVariant="label-default-s" vertical="center" gap="16">
+                <Checkbox
+                  isChecked={allCurrentSelected || (someCurrentSelected && !allCurrentSelected)}
+                  isIndeterminate={someCurrentSelected && !allCurrentSelected}
+                  onToggle={toggleSelectAllCurrent}
+                />
+              </Row>
+            )}
+            {columns.map((col, cIdx) => (
+              <Row
+                key={`head-${col.key}-${cIdx}`}
+                fillWidth
+                minWidth={8}
+                textVariant="label-default-s"
+                vertical="center"
+                horizontal={col.align === "end" ? "end" : col.align === "center" ? "center" : "start"}
+                paddingRight={col.align === "end" ? "8" : undefined}
+              >
+                {col.title}
+              </Row>
+            ))}
+          </Row> 
+          <Column fillWidth overflow="auto">
+            <Column fitWidth style={{minWidth: "100%"}}>
+              {paginatedItems.map((item, index) => {
+                const globalIndex = startIndex + index;
+                const id = resolveId(item, globalIndex);
+                return (
+                  <Row key={`row-${id}`} gap="16" fillWidth borderBottom={index === paginatedItems.length - 1 ? "transparent" : "neutral-alpha-weak"}>
+                    <Card fillWidth paddingY="8" paddingX="24" gap="16" vertical="center" border="transparent" background="transparent">
+                      {selectable && (
+                        <Row vertical="center" gap="16">
+                          <Checkbox
+                            key={`cb-${id}`}
+                            isChecked={isSelected(id)}
+                            onToggle={() => toggleSelect(id)}
+                          />
+                        </Row>
+                      )}
+                      {columns.map((col, cIdx) => (
+                        <Row
+                          key={`cell-${id}-${col.key}-${cIdx}`}
+                          fillWidth
+                          minWidth={8}
+                          horizontal={col.align === "end" ? "end" : col.align === "center" ? "center" : "start"}
+                          paddingRight={col.align === "end" ? "8" : undefined}
+                        >
+                          {col.render(item, globalIndex)}
+                        </Row>
+                      ))}
+                    </Card>
+                  </Row>
+                );
+              })}
+            </Column>
+            {paginatedItems.length === 0 && (
+              <Column fill center padding="l" gap="24">
+                <Text variant="label-default-s" onBackground="neutral-weak">No results{search ? ` for "${search}"` : ""}</Text>
+                {showSearch && <Button size="s" variant="secondary" onClick={() => setSearch("")}>Clear search</Button>}
+              </Column>
+            )}
+          </Column>
+        </Column>
+      </Column>
+
+      <Row fillWidth horizontal="between" vertical="center" paddingX="24">
+        <Row fillWidth paddingY="12" gap="12" vertical="center">
+          <IconButton icon="chevronLeft" size="s" variant="ghost" onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1}/>
+          <Row gap="4" vertical="center">
+            {/* Page 1 */}
+            <IconButton
+              key={`page-1`}
+              size="m"
+              variant={currentPage === 1 ? "primary" : "secondary"}
+              onClick={() => setCurrentPage(1)}
+            >
+              <Text variant="label-strong-s">1</Text>
+            </IconButton>
+
+            {/* Page 2 (if exists) */}
+            {totalitemsPerPage >= 2 && (
+              <IconButton
+                key={`page-2`}
+                size="m"
+                variant={currentPage === 2 ? "primary" : "secondary"}
+                onClick={() => setCurrentPage(2)}
+              >
+                <Text variant="label-strong-s">2</Text>
+              </IconButton>
+            )}
+
+            {/* More dropdown for middle pages when > 4 total pages */}
+            {totalitemsPerPage > 4 && (
+              <DropdownWrapper
+                placement="bottom-end"
+                trigger={<IconButton icon="moreHorizontal" size="s" variant="ghost"/>}
+                dropdown={
+                  <Column padding="4" gap="2" width={4}>
+                    {Array.from({ length: totalitemsPerPage - 4 }, (_, i) => i + 3).map((pageNum) => (
+                      <ToggleButton
+                        key={`page-middle-${pageNum}`}
+                        fillWidth
+                        horizontal="start"
+                        selected={currentPage === pageNum}
+                        onClick={() => setCurrentPage(pageNum)}
+                      >
+                        {pageNum}
+                      </ToggleButton>
+                    ))}
+                  </Column>
+                }
+              />
+            )}
+
+            {/* Last-1 and Last */}
+            {totalitemsPerPage >= 4 ? (
+              <>
+                <IconButton
+                  key={`page-${totalitemsPerPage - 1}`}
+                  size="m"
+                  variant={currentPage === totalitemsPerPage - 1 ? "primary" : "secondary"}
+                  onClick={() => setCurrentPage(totalitemsPerPage - 1)}
+                >
+                  <Text variant="label-strong-s">{totalitemsPerPage - 1}</Text>
+                </IconButton>
+                <IconButton
+                  key={`page-${totalitemsPerPage}`}
+                  size="m"
+                  variant={currentPage === totalitemsPerPage ? "primary" : "secondary"}
+                  onClick={() => setCurrentPage(totalitemsPerPage)}
+                >
+                  <Text variant="label-strong-s">{totalitemsPerPage}</Text>
+                </IconButton>
+              </>
+            ) : totalitemsPerPage === 3 ? (
+              <IconButton
+                key={`page-3`}
+                size="m"
+                variant={currentPage === 3 ? "primary" : "secondary"}
+                onClick={() => setCurrentPage(3)}
+              >
+                <Text variant="label-strong-s">3</Text>
+              </IconButton>
+            ) : null}
+          </Row>
+          <IconButton icon="chevronRight" size="s" variant="ghost" onClick={() => setCurrentPage(currentPage + 1)} disabled={currentPage === totalitemsPerPage}/>
+        </Row>
+
+        <DropdownWrapper
+          placement="bottom-end"
+          trigger={
+            <Button size="s" variant="secondary" prefixIcon="chevronDown">
+              <Text variant="label-strong-s">{itemsPerPage}</Text>
+            </Button>
+          }
+          dropdown={
+            <Column padding="4" gap="2" width={4}>
+              {itemsPerPageOptions.map((option) => (
+                <ToggleButton
+                  key={option}
+                  fillWidth
+                  horizontal="start"
+                  onClick={() => setItemsPerPage(option)}
+                >
+                  {option}
+                </ToggleButton>
+              ))}
+            </Column>
+          }
+        />
+      </Row>
+    </Column>
+  );
+};

package/ai/examples/blocks/Waitlist1.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import {
+  Row,
+  Column,
+  Badge,
+  Heading,
+  Input,
+  IconButton,
+  AvatarGroup,
+  CountFx,
+  Text,
+  Logo,
+  RevealFx,
+  Line,
+} from "@once-ui-system/core";
+import { Background6 } from "./Background6";
+import { useEffect, useState } from "react";
+
+export const Waitlist1 = () => {
+  const [email, setEmail] = useState("");
+  const [subscribers, setSubscribers] = useState(0);
+  const [subscribed, setSubscribed] = useState(false);
+  
+  useEffect(() => {
+    setSubscribers(1337);
+  });
+
+  const validateEmail = (email: any) => {
+    if (!email) return null;
+    
+    const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
+    if (!emailRegex.test(email)) {
+      return "Please enter a valid email address";
+    }
+    
+    return null;
+  };
+
+  const subscribe = () => {
+    if (validateEmail(email)) {
+      return;
+    }
+    
+    setSubscribed(true);
+    setSubscribers(subscribers + 1);
+    setEmail("");
+  };
+
+  return (
+    <Row fillWidth center padding="l" minHeight="100%"
+      cursor={
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g>
+            <path d="M7.89235 19.7113L3.33378 3.71982C3.0984 2.89409 3.95602 2.18106 4.73584 2.55413L19.8385 9.7792C20.6416 10.1634 20.5812 11.3159 19.7425 11.6131L13.5312 13.8139C13.3056 13.8938 13.1164 14.0511 12.9978 14.2574L9.73178 19.9361C9.29078 20.7029 8.13473 20.5616 7.89235 19.7113Z" fill="#15D9EF"/>
+            <path d="M2.85075 3.8544C2.49768 2.61583 3.78362 1.54674 4.95335 2.10628L20.0564 9.3314C21.2607 9.90776 21.1699 11.6359 19.9119 12.0816L13.7012 14.2825C13.5885 14.3224 13.4939 14.4012 13.4346 14.5041L10.1679 20.1829C9.50645 21.3329 7.7731 21.1214 7.40931 19.8463L2.85075 3.8544Z" stroke="#15AAEF"/>
+          </g>
+        </svg>
+      }>
+      <Background6 />
+      <Column horizontal="center" gap="40" maxWidth="xs">
+        <RevealFx horizontal="center">
+          <Badge paddingX="24" background="brand-alpha-weak" pointerEvents="none" textVariant="label-default-s" onBackground="brand-medium">
+            <Logo size="s" dark icon="/trademarks/icon-dark.svg" wordmark="/trademarks/wordmark-dark.svg"/>
+            <Logo size="s" light icon="/trademarks/icon-light.svg" wordmark="/trademarks/wordmark-light.svg"/>
+            <Line vert marginX="16" height="20" background="brand-alpha-medium"/>
+            <Text paddingX="4">Arriving soon</Text>
+          </Badge>
+        </RevealFx>
+        <Column horizontal="center" align="center" gap="24">
+          <RevealFx horizontal="center" delay={0.4}>
+            <Heading variant="display-strong-xl" onBackground="neutral-strong">
+              The all-in-one course platform
+            </Heading>
+          </RevealFx>
+          <RevealFx horizontal="center" delay={0.6}>
+            <Text onBackground="neutral-medium" variant="heading-default-xl">
+              Launch and sell your courses with ease. We handle enrollment, payments and analytics. You focus on creating.
+            </Text>
+          </RevealFx>
+        </Column>
+        <RevealFx horizontal="center" delay={0.8}>
+          <AvatarGroup
+            reverse
+            size="m"
+            avatars={[
+              { src: "/images/creators/lorant.jpg" },
+              { src: "/images/creators/justin.jpg" },
+              { src: "/images/creators/light.jpg" },
+              { src: "/images/creators/texz.jpg" },
+              { src: "/images/creators/suhaib.jpg" },
+            ]}
+          />
+        </RevealFx>
+
+        <Column maxWidth={24} horizontal="center" align="center">
+          {subscribed ? (
+            <RevealFx key="waitlist" direction="column" horizontal="center" paddingX="64" paddingY="24" radius="l" background="brand-alpha-weak" border="brand-alpha-weak" gap="20">
+              <Text variant="label-default-m" onBackground="brand-medium">
+                You're on the list!
+              </Text>
+              <Row vertical="center" textVariant="heading-strong-l" gap="16">
+                That makes it <CountFx
+                  value={subscribers}
+                  variant="code-default-xl"
+                  speed={4000}
+                  effect="smooth"
+                  easing="ease-out"
+                />
+              </Row>
+            </RevealFx>
+          ) : (
+            <RevealFx key="subscribed" direction="column" horizontal="center" delay={1} gap="16" data-border="rounded">
+              <Input
+                id="email"
+                placeholder="Enter email"
+                value={email}
+                validate={(value) => validateEmail(value as string)}
+                onChange={(e) => setEmail(e.target.value)}
+                hasSuffix={
+                  <IconButton size="l" style={{marginRight: "-0.5rem"}} icon="send" onClick={() => subscribe()}/>
+                }
+              />
+              <Row vertical="center" gap="4" textVariant="label-default-s">
+                <Text>Join</Text>
+                <CountFx
+                  value={subscribers}
+                  variant="code-default-s"
+                  speed={1000}
+                  effect="smooth"
+                  easing="ease-out"
+                />
+                <Text>others</Text>
+              </Row>
+            </RevealFx>
+          )}
+        </Column>
+      </Column>
+    </Row>
+  );
+};

package/ai/examples/blocks/content/chat1content.ts

@@ -0,0 +1,65 @@
+export const sidebar = [
+  {
+    items: [
+      { label: "Members" },
+      { label: "Files" },
+      { label: "Pins" },
+    ],
+  },
+  {
+    title: "Channels",
+    rooms: [
+      { label: "👋 ┃ intro" },
+      { label: "general" },
+      { label: "design-system" },
+    ],
+  },
+];
+
+export const chatMembers = [
+  {
+    title: "Online",
+    members: [
+      {
+        name: "Jane Wong",
+        status: "Active now",
+        bio: "Design engineer",
+        avatar: "/images/creators/lorant.jpg",
+        group: "Online",
+      },
+      {
+        name: "Lorant K.",
+        status: "Coding something...",
+        bio: "Building Once UI",
+        avatar: "/images/creators/lorant.jpg",
+        group: "Online",
+      },
+    ],
+  },
+];
+
+export const chatMessages = [
+  {
+    author: { name: "Jane Wong", avatar: "/images/creators/lorant.jpg" },
+    postedAt: new Date("2025-01-18T09:38:00"),
+    message: "Can you sanity-check the chat density before we ship?",
+    attachments: [],
+    reactions: [{ emoji: "👍", count: 2, reacted: true }],
+  },
+  {
+    author: { name: "Lorant K.", avatar: "/images/creators/lorant.jpg" },
+    postedAt: new Date("2025-01-18T09:40:00"),
+    message: "On it — Discord sidebar + Linear message rhythm.",
+    attachments: [
+      { media: "/images/blocks/vibe-coding-dark.jpg" },
+    ],
+    reactions: [],
+  },
+  {
+    author: { name: "Jane Wong", avatar: "/images/creators/lorant.jpg" },
+    postedAt: new Date("2025-01-18T09:42:00"),
+    message: "",
+    attachments: [{ media: "https://docs.once-ui.com" }],
+    reactions: [{ emoji: "🔗", count: 1, reacted: false }],
+  },
+];

package/ai/examples/blocks/content/resources.ts

@@ -0,0 +1,5 @@
+export const social = [
+  { icon: "link", label: "Discord", href: "https://discord.com/invite/5EyAQ4eNdS" },
+  { icon: "link", label: "GitHub", href: "https://github.com/once-ui-system" },
+  { icon: "document", label: "Email", href: "mailto:demo@email.com" },
+];

package/ai/examples/blocks/content/roadmap1content.ts

@@ -0,0 +1,51 @@
+export const task = {
+  planned: { label: "Planned", color: "neutral" },
+  progress: { label: "In progress", color: "brand" },
+  done: { label: "Done", color: "success" },
+  blocked: { label: "Blocked", color: "danger" },
+} as const;
+
+export const roadmap = [
+  {
+    product: "Once UI Core",
+    brand: "brand",
+    columns: [
+      {
+        title: "Planned",
+        tasks: [
+          {
+            title: "Agent-first MCP tools",
+            description: "resolve, get_component, validate",
+            type: "progress",
+            user: { name: "Lorant", avatar: "/images/creators/lorant.jpg" },
+            href: "#",
+          },
+          {
+            title: "Expanded block references",
+            description: "Pro block gold examples in harness",
+            type: "planned",
+          },
+        ],
+      },
+      {
+        title: "In progress",
+        tasks: [
+          {
+            title: "Codegen harness Phase 1",
+            type: "progress",
+            user: { name: "Lorant" },
+          },
+        ],
+      },
+      {
+        title: "Done",
+        tasks: [
+          {
+            title: "Component catalog slices",
+            type: "done",
+          },
+        ],
+      },
+    ],
+  },
+];