Skip to content

UI dev #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
m-sanjid merged 2 commits into from
Apr 7, 2026
Merged

UI dev #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9fa960d
feat: new components and accordion variants
m-sanjid Apr 6, 2026
14fa405
feat: fix
m-sanjid Apr 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/cli/dist/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ program
await (0, config_js_1.setConfig)(cwd, config);
await (0, files_js_1.ensureComponentsDirectory)(cwd, config);
await (0, files_js_1.ensureUtilsFile)(cwd, config);
await (0, files_js_1.ensureCssFile)(cwd, config);
const requiredDeps = [
'clsx',
'tailwind-merge',
Expand Down
237 changes: 237 additions & 0 deletions apps/cli/dist/utils/files.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ exports.installFiles = installFiles;
exports.transformImports = transformImports;
exports.ensureUtilsFile = ensureUtilsFile;
exports.ensureComponentsDirectory = ensureComponentsDirectory;
exports.ensureCssFile = ensureCssFile;
const fs_extra_1 = __importDefault(require("fs-extra"));
const path_1 = __importDefault(require("path"));
async function installFiles(components, options) {
Expand Down Expand Up @@ -60,6 +61,242 @@ async function ensureComponentsDirectory(cwd, config) {
const componentsPath = config.aliases.components.replace('@/', '');
await fs_extra_1.default.ensureDir(path_1.default.join(cwd, componentsPath, 'ui'));
}
async function ensureCssFile(cwd, config) {
const cssContent = `@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-geist-mono);
--shadow-3d: inset 0 5px 6px var(--color-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
}

:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.809 0.105 251.813);
--chart-2: oklch(0.623 0.214 259.815);
--chart-3: oklch(0.546 0.245 262.881);
--chart-4: oklch(0.488 0.243 264.376);
--chart-5: oklch(0.424 0.199 265.638);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}

.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.809 0.105 251.813);
--chart-2: oklch(0.623 0.214 259.815);
--chart-3: oklch(0.546 0.245 262.881);
--chart-4: oklch(0.488 0.243 264.376);
--chart-5: oklch(0.424 0.199 265.638);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}

@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
html {
@apply font-sans;
}

@keyframes show-top-mask {
to {
--top-mask-height: var(--mask-height);
}
}

@keyframes hide-bottom-mask {
to {
--bottom-mask-height: 0px;
}
}

@keyframes show-left-mask {
to {
--left-mask-width: var(--mask-width);
}
}

@keyframes hide-right-mask {
to {
--right-mask-width: 0px;
}
}
}

@property --top-mask-height {
syntax: "<length>";
inherits: true;
initial-value: 0px;
}

@property --bottom-mask-height {
syntax: "<length>";
inherits: true;
initial-value: 64px;
}

@property --left-mask-width {
syntax: "<length>";
inherits: true;
initial-value: 0px;
}

@property --right-mask-width {
syntax: "<length>";
inherits: true;
initial-value: 64px;
}

@utility scroll-fade-effect-y {
--mask-height: 64px;
--mask-offset-top: 0px;
--mask-offset-bottom: 0px;
--scroll-buffer: 2rem;
mask-image: linear-gradient(to top, transparent, black 90%), linear-gradient(to bottom, transparent 0%, black 100%), linear-gradient(black, black);
mask-size: 100% var(--top-mask-height), 100% var(--bottom-mask-height), 100% 100%;
mask-repeat: no-repeat, no-repeat, no-repeat;
mask-position: 0 var(--mask-offset-top), 0 calc(100% - var(--mask-offset-bottom)), 0 0;
mask-composite: exclude;
animation-name: show-top-mask, hide-bottom-mask;
animation-timeline: scroll(self), scroll(self);
animation-range: 0 var(--scroll-buffer), calc(100% - var(--scroll-buffer)) 100%;
animation-fill-mode: both;
}

@utility scroll-fade-effect-x {
--mask-width: 64px;
--mask-offset-left: 0px;
--mask-offset-right: 0px;
--scroll-buffer: 2rem;
mask-image: linear-gradient(to left, transparent, black 90%), linear-gradient(to right, transparent 0%, black 100%), linear-gradient(black, black);
mask-size: var(--left-mask-width) 100%, var(--right-mask-width) 100%, 100% 100%;
mask-repeat: no-repeat, no-repeat, no-repeat;
mask-position: var(--mask-offset-left) 0, calc(100% - var(--mask-offset-right)) 0, 0 0;
mask-composite: exclude;
animation-name: show-left-mask, hide-right-mask;
animation-timeline: scroll(self inline), scroll(self inline);
animation-range: 0 var(--scroll-buffer), calc(100% - var(--scroll-buffer)) 100%;
animation-fill-mode: both;
}

/* Hide scrollbar globally */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
display: none;
}

/* Apply to all scrollable elements */
* {
scrollbar-width: none;
-ms-overflow-style: none;
}

*::-webkit-scrollbar {
display: none;
}
`;
const fullPath = path_1.default.join(cwd, config.tailwind.css);
if (!(await fs_extra_1.default.pathExists(fullPath))) {
await fs_extra_1.default.ensureDir(path_1.default.dirname(fullPath));
await fs_extra_1.default.writeFile(fullPath, cssContent, 'utf-8');
}
}
function resolveTargetRoot(cwd, installPath) {
if (!installPath) {
return cwd;
Expand Down
12 changes: 9 additions & 3 deletions apps/platform/app/(docs)/[...slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
PopoverTrigger,
} from "@/components/ui/popover";
import { getComponentLinks, getComponentPager } from "@/lib/docs-navigation";
import { normalizeDocSlug } from "@/lib/normalize-doc-slug";
import { docsSource } from "@/lib/docs-source";
import { getRegistryCatalog } from "@/lib/registry-catalog";
import { customMDXComponents } from "@/mdx-components";
Expand Down Expand Up @@ -124,7 +125,8 @@ export default async function DocsPage({
);
}

const componentSlug = page.slugs.at(-1);
const componentSlug = normalizeDocSlug(page.slugs.at(-1) ?? "");

const catalog = await getRegistryCatalog();
const componentDocs = getComponentLinks();
const component = catalog
Expand Down Expand Up @@ -183,10 +185,10 @@ export default async function DocsPage({

<section className="mb-6 min-w-0 space-y-4">
{qrValue ? (
<div className="flex justify-start sm:justify-end">
<div className="flex flex-col items-start gap-1 sm:items-end">
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" size="sm">
<Button variant="outline" size="sm" type="button">
Scan to preview
</Button>
</PopoverTrigger>
Expand All @@ -198,6 +200,10 @@ export default async function DocsPage({
/>
</PopoverContent>
</Popover>
<p className="text-muted-foreground max-w-xs text-xs leading-5 sm:text-right">
Tap to show a QR code for the Expo showcase deep link. The web
preview below runs in the browser.
</p>
</div>
) : null}
<ComponentPreview
Expand Down
21 changes: 21 additions & 0 deletions apps/platform/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
/* Radix Accordion + shadcn-style content height animation */
--animate-accordion-down: accordion-down 0.2s ease-out;
--animate-accordion-up: accordion-up 0.2s ease-out;
}

:root {
Expand Down Expand Up @@ -115,6 +118,24 @@
--sidebar-ring: oklch(0.556 0 0);
}

@keyframes accordion-down {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
}

@keyframes accordion-up {
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
}

@layer base {
* {
@apply border-border outline-ring/50;
Expand Down
Loading
Loading