diff --git a/apps/docs/components/button/button.css b/apps/docs/components/button/button.css
index 7a06b9555..9ad25469a 100644
--- a/apps/docs/components/button/button.css
+++ b/apps/docs/components/button/button.css
@@ -32,7 +32,8 @@
flex-direction: row-reverse;
}
-.hd-btn[data-focus-visible="true"] {
+.hd-btn[data-focus-visible="true"],
+a.hd-btn:focus-visible {
box-shadow: var(--hd-focus-ring);
}
diff --git a/apps/docs/components/collapsible/Collapsible.stories.tsx b/apps/docs/components/collapsible/Collapsible.stories.tsx
new file mode 100644
index 000000000..5f3d09385
--- /dev/null
+++ b/apps/docs/components/collapsible/Collapsible.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Collasible from "./Collapsible.tsx";
+
+
+const meta = {
+ title: "components/Collasible",
+ component: Collasible
+} satisfies Meta
;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ title: "Label",
+ children: "Conent of the collapsible"
+ }
+};
diff --git a/apps/docs/components/collapsible/Collapsible.tsx b/apps/docs/components/collapsible/Collapsible.tsx
new file mode 100644
index 000000000..169dc64de
--- /dev/null
+++ b/apps/docs/components/collapsible/Collapsible.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import clsx from "clsx";
+import { type ReactNode, useRef, useState } from "react";
+import { ToggleButton } from "react-aria-components";
+import { Icon, CollapseIcon } from "@/components/icon";
+
+import "./collapsible.css";
+
+export interface CollapsibleProps {
+ children: ReactNode;
+ title: ReactNode;
+ label?: string;
+ isOpen?: boolean;
+ className?: string;
+}
+
+const Collapsible = ({ children, title, label, isOpen = false, className }: CollapsibleProps) => {
+ const [open, setOpen] = useState(isOpen);
+ const contentRef = useRef(null);
+
+ let styles = { height: "0px" };
+
+ if (contentRef.current && open) {
+ styles = { height: contentRef.current.scrollHeight + "px" };
+ }
+
+ const toggle = () => {
+ setOpen(!open);
+ };
+
+ return (
+
+ );
+};
+
+export default Collapsible;
diff --git a/apps/docs/components/collapsible/collapsible.css b/apps/docs/components/collapsible/collapsible.css
new file mode 100644
index 000000000..6d0282a60
--- /dev/null
+++ b/apps/docs/components/collapsible/collapsible.css
@@ -0,0 +1,52 @@
+/* Collapse */
+.hd-collapsible__trigger {
+ --collapsible-trigger-background: transparent;
+
+ font-family: var(--hd-default-font-family);
+ font-size: var(--hd-default-font-size);
+ line-height: 1.35;
+ color: var(--hd-color-neutral-text);
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ padding-block: var(--hd-space-2);
+ padding-inline: var(--hd-space-2);
+ border: none;
+ border-radius: 0.5rem;
+ background: var(--collapsible-trigger-background);
+ box-shadow: none;
+ transition: box-shadow 0.15s ease-in-out;
+ margin-inline: calc(var(--hd-space-2) * -1);
+}
+
+.hd-collapsible__trigger[data-hovered="true"] {
+ --collapsible-trigger-background: var(--hd-color-neutral-surface);
+
+ cursor: pointer;
+ box-shadow: 0 0.25rem 0.625rem 0.25rem rgb(60 60 60 / 8%);
+}
+
+.hd-collapsible__trigger .hd-title {
+ margin-block: 0;
+ margin-inline: 0;
+}
+
+.hd-collapsible__trigger[data-focused="true"],
+.hd-collapsible__trigger[data-focus-visible="true"] {
+ outline: none;
+}
+
+.hd-collapsible__trigger[data-focus-visible="true"] {
+ box-shadow: var(--hd-focus-ring);
+}
+
+.hd-collapsible__content {
+ padding-block: var(--hd-space-1);
+}
+
+.hd-collapsible__content-parent {
+ height: 0;
+ overflow: hidden;
+ transition: height ease 0.15s;
+}
diff --git a/apps/docs/components/highlightCode/HighlightCode.stories.tsx b/apps/docs/components/highlightCode/HighlightCode.stories.tsx
new file mode 100644
index 000000000..9dffa52c0
--- /dev/null
+++ b/apps/docs/components/highlightCode/HighlightCode.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { HighlightCode, highlightCode } from "./";
+
+const meta = {
+ title: "components/HighlightCode",
+ component: HighlightCode
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const code = await highlightCode(`
+\`\`\`shell showLineNumbers
+pnpm install @hoper-ui/icons
+\`\`\`
+`);
+
+export const Default: Story = {
+ args: {
+ code: code
+ }
+};
diff --git a/apps/docs/app/ui/components/codeBlock/CodeBlock.tsx b/apps/docs/components/highlightCode/HighlightCode.tsx
similarity index 86%
rename from apps/docs/app/ui/components/codeBlock/CodeBlock.tsx
rename to apps/docs/components/highlightCode/HighlightCode.tsx
index 45ffda18b..a205881ac 100644
--- a/apps/docs/app/ui/components/codeBlock/CodeBlock.tsx
+++ b/apps/docs/components/highlightCode/HighlightCode.tsx
@@ -8,6 +8,10 @@ import rehypeParse from "rehype-parse";
import Pre from "@/components/pre/Pre.tsx";
+export interface HighlightCodeProps {
+ code: string;
+}
+
const production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs, components: { pre: Pre } };
function useProcessor(text: string) {
@@ -27,6 +31,6 @@ function useProcessor(text: string) {
return Content;
}
-export default function CodeBlock({ code }: { code: string }) {
+export default function HighlightCode({ code }: HighlightCodeProps) {
return useProcessor(code);
}
diff --git a/apps/docs/components/highlightCode/highlightCode.ts b/apps/docs/components/highlightCode/highlightCode.ts
new file mode 100644
index 000000000..a2593942d
--- /dev/null
+++ b/apps/docs/components/highlightCode/highlightCode.ts
@@ -0,0 +1,16 @@
+import { type Plugin, unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { rehypePluginOptions } from "@/app/lib/rehypeConfig";
+import rehypeStringify from "rehype-stringify";
+
+export async function highlightCode(code: string) {
+ const file = await unified()
+ .use(remarkParse as unknown as Plugin)
+ .use(remarkRehype as unknown as Plugin)
+ .use(rehypePluginOptions as unknown as Plugin)
+ .use(rehypeStringify as unknown as Plugin)
+ .process(code);
+
+ return String(file);
+}
diff --git a/apps/docs/components/highlightCode/index.ts b/apps/docs/components/highlightCode/index.ts
new file mode 100644
index 000000000..ad98271c0
--- /dev/null
+++ b/apps/docs/components/highlightCode/index.ts
@@ -0,0 +1,8 @@
+import { highlightCode } from "./highlightCode.ts";
+import HighlightCode, { type HighlightCodeProps } from "./HighlightCode.tsx";
+
+export {
+ highlightCode,
+ HighlightCode,
+ type HighlightCodeProps
+};
diff --git a/apps/docs/components/icon/assets/accessible.svg b/apps/docs/components/icon/assets/accessible.svg
new file mode 100644
index 000000000..dfeef8cf4
--- /dev/null
+++ b/apps/docs/components/icon/assets/accessible.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/apps/docs/components/icon/assets/arrow.svg b/apps/docs/components/icon/assets/arrow.svg
new file mode 100644
index 000000000..88f4a7332
--- /dev/null
+++ b/apps/docs/components/icon/assets/arrow.svg
@@ -0,0 +1 @@
+
+
diff --git a/apps/docs/components/icon/assets/dark-mode.svg b/apps/docs/components/icon/assets/dark-mode.svg
new file mode 100644
index 000000000..2eca64c38
--- /dev/null
+++ b/apps/docs/components/icon/assets/dark-mode.svg
@@ -0,0 +1 @@
+, HTMLHeadingElement>;
const PreviewComponent = dynamic(() => import("@/app/ui/components/previewComponent/PreviewComponent.tsx"));
const MigrateGuide = dynamic(() => import("@/app/ui/components/migrateGuide/MigrateGuide.tsx"));
+const PropTable = dynamic(() => import("@/app/ui/components/propTable/PropTable.tsx"));
export const components = {
Card,
@@ -31,7 +36,7 @@ export const components = {
pre: Pre,
MotionPreview: MotionPreview,
Footnote: Footnote,
- Table: Table,
+ Table: TokenTable,
TypographyTable: TypographyTable,
TypographyVariantTable: TypographyVariantTable,
IconTable: IconTable,
@@ -39,12 +44,18 @@ export const components = {
Tabs: Tabs,
TableSection: TableSection,
Switcher: Switcher,
+ PackageInstallation: (props: PackageInstallationProps) => {
+ return ;
+
+const methods = ["pnpm", "yarn", "npm"] as const;
+
+const methodsIcons: MethodIcons = {
+ pnpm:
+ ,
+ yarn:
+ ,
+ npm:
+
+};
+
+const installMethods = methods.map(method => ({
+ category: method,
+ title: method,
+ titleIcon: methodsIcons[method]
+}));
+
+const formatCode = async (method: string, library: string, mode: string) => {
+ const code = `${method} add ${mode === "dev" ? "-D" : ""} @hopper-ui/${library}`;
+
+ return await highlightCode(`
+\`\`\`shell
+${code.replace(/\s{2,}/g, " ")}
+\`\`\`
+`);
+};
+
+const PackageInstallation = async ({ library, mode = "prod" }: PackageInstallationProps) => {
+ const tabsContent = await Promise.all(methods.map(async method => {
+ const code = await formatCode(method, library, mode);
+
+ return (
+
+
+ );
+ }));
+
+ return (
+
+ {tabsContent}
+
+ );
+};
+
+export default PackageInstallation;
diff --git a/apps/docs/components/pre/pre.css b/apps/docs/components/pre/pre.css
index 205c1e549..2e927d20e 100644
--- a/apps/docs/components/pre/pre.css
+++ b/apps/docs/components/pre/pre.css
@@ -8,6 +8,7 @@
margin-block: 0.25rem;
align-content: center;
color: var(--hd-color-neutral-text-strong);
+ overflow-x: auto;
}
.hd-pre--title,
diff --git a/apps/docs/components/table/Table.stories.tsx b/apps/docs/components/table/Table.stories.tsx
new file mode 100644
index 000000000..71eba3345
--- /dev/null
+++ b/apps/docs/components/table/Table.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Table from "./Table";
+import Code from "@/components/code/Code";
+import Preview from "@/app/ui/tokens/preview/Preview.tsx";
+
+const meta = {
+ title: "components/Table",
+ component: Table
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ head: ["Position", "Mass", "Symbol", "Name"],
+ data: [
+ { position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
+ { position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
+ { position: 39, mass: 88.906, symbol: "Y", name: "Yttrium" },
+ { position: 56, mass: 137.33, symbol: "Ba", name: "Barium" },
+ { position: 58, mass: 140.12, symbol: "Ce", name: "Cerium" }
+ ]
+ }
+};
+
+export const Tokens: Story = {
+ args: {
+ lastColumnAlignment: "right",
+ head: ["Token", "Value", "Preview"],
+ data: [
+ {
+ name: --hop-sapphire-200,
+ value: "#95b1ff",
+ preview: --hop-primary-surface-disabled,
+ value: "#95b1ff",
+ preview: --hop-primary-surface-disabled,
+ value: "#2040c7",
+ preview:
+ {item}
+
+ );
+ });
+
+ const dataItems = data.map(item => {
+ return (
+
+ {Object.keys(item).map((key, index) => {
+ return (
+ |
+ {item[key]}
+ |
+ );
+ })}
+
+ );
+ });
+
+ return (
+
+
+ {headItems}
+
+
+ {dataItems}
+
+
+ );
+};
+
+export default Table;
diff --git a/apps/docs/components/table/table.css b/apps/docs/components/table/table.css
new file mode 100644
index 000000000..195fba20c
--- /dev/null
+++ b/apps/docs/components/table/table.css
@@ -0,0 +1,40 @@
+.hd-table {
+ width: 100%;
+ outline: none;
+ border-spacing: 0;
+ align-self: start;
+}
+
+.hd-table__column {
+ padding: var(--hd-space-2) var(--hd-space-1);
+ text-align: left;
+ color: var(--hd-color-neutral-text-weakest);
+ font-size: 0.8125rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 0.8125rem;
+}
+
+.hd-table__column:first-child {
+ padding-left: 0;
+}
+
+.hd-table__column--size {
+ min-width: 3rem;
+}
+
+.hd-table__cell {
+ font-family: var(--hd-mono-font-family);
+ font-size: 0.8125rem;
+ padding: var(--hd-space-1);
+ border-bottom: var(--hd-border-size) solid var(--hd-color-neutral-border);
+}
+
+.hd-table__row > .hd-table__cell:first-child {
+ padding-left: 0;
+}
+
+.hd-table__colum--right,
+.hd-table__cell--right {
+ text-align: right;
+}
diff --git a/apps/docs/components/themeSwitch/themeSwitch.css b/apps/docs/components/themeSwitch/themeSwitch.css
index 82e247791..60b3b9abf 100644
--- a/apps/docs/components/themeSwitch/themeSwitch.css
+++ b/apps/docs/components/themeSwitch/themeSwitch.css
@@ -10,7 +10,7 @@
font-size: 1rem;
}
-@media screen and (width >= 48rem) {
+@media screen and (width >= 37.5rem) {
.hd-theme-switch__button {
width: var(--hd-space-4);
aspect-ratio: 1/1;
diff --git a/apps/docs/content/components/button.mdx b/apps/docs/content/components/button.mdx
index 7c253f9dc..d7c844de4 100644
--- a/apps/docs/content/components/button.mdx
+++ b/apps/docs/content/components/button.mdx
@@ -17,6 +17,10 @@ import { Button } from "@hopper-ui/components";
```tsx showLineNumbers
save
```
+## Props
+The table below contains all types of the props available in title component.
+
+
-
- ```shell
- pnpm add @hopper-ui/icons
- ```
-
-
- ```shell
- yarn add -D @hopper-ui/icons
- ```
-
-
- ```shell
- npm add -D @hopper-ui/icons
- ```
-
-
+
-
- ```shell
- pnpm add @hopper-ui/icons @hopper-ui/styled-system react-aria-components
- ```
-
-
- ```shell
- yarn add @hopper-ui/icons @hopper-ui/styled-system react-aria-components
- ```
-
-
- ```shell
- npm add @hopper-ui/icons @hopper-ui/styled-system react-aria-components
- ```
-
-
+
-
- ```shell
- pnpm add @hopper-ui/svg-icons
- ```
-
-
- ```shell
- yarn add -D @hopper-ui/svg-icons
- ```
-
-
- ```shell
- npm add -D @hopper-ui/svg-icons
- ```
-
-
+
-
- ```shell
- pnpm add @hopper-ui/tokens
- ```
-
-
- ```shell
- yarn add -D @hopper-ui/tokens
- ```
-
-
- ```shell
- npm add -D @hopper-ui/tokens
- ```
-
-
+"}},"isLoading":{"defaultValue":null,"description":"","name":"isLoading","parent":{"fileName":"wl-hopper/packages/components/src/buttons/src/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"wl-hopper/packages/components/src/buttons/src/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"boolean"}},"href":{"defaultValue":null,"description":"A URL to link to. Setting this makes the component render an `a` tag instead of a `button`","name":"href","parent":{"fileName":"wl-hopper/packages/components/src/buttons/src/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"wl-hopper/packages/components/src/buttons/src/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":null,"description":"The target window for the link.","name":"target","parent":{"fileName":"wl-hopper/packages/components/src/buttons/src/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"wl-hopper/packages/components/src/buttons/src/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"rel":{"defaultValue":null,"description":"The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).","name":"rel","parent":{"fileName":"wl-hopper/packages/components/src/buttons/src/Button.tsx","name":"ButtonProps"},"declarations":[{"fileName":"wl-hopper/packages/components/src/buttons/src/Button.tsx","name":"ButtonProps"}],"required":false,"type":{"name":"string"}},"form":{"defaultValue":null,"description":"The