diff --git a/cli/package-lock.json b/cli/package-lock.json index ed5dff4..fb52bed 100644 --- a/cli/package-lock.json +++ b/cli/package-lock.json @@ -1,6 +1,6 @@ { "name": "@fydemy/ui", - "version": "0.1.1", + "version": "0.1.3", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/cli/package.json b/cli/package.json index 7785ac5..c8e8bdc 100644 --- a/cli/package.json +++ b/cli/package.json @@ -1,6 +1,6 @@ { "name": "@fydemy/ui", - "version": "0.1.1", + "version": "0.1.3", "description": "A lightweight UI-kit library with components written in CSS and TypeScript", "main": "dist/cli.js", "types": "dist/cli.d.ts", diff --git a/cli/ui.json b/cli/ui.json deleted file mode 100644 index 9dc5819..0000000 --- a/cli/ui.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "path": "app/components/ui", - "theme": "trakteer", - "pm": "npm" -} \ No newline at end of file diff --git a/ui/accordion/index.css b/ui/accordion/index.css deleted file mode 100644 index 1a697e5..0000000 --- a/ui/accordion/index.css +++ /dev/null @@ -1,36 +0,0 @@ -div.accordion[data-theme="trakteer"] { - font-family: "Pontano Sans", sans-serif; - display: flex; - flex-direction: column; - gap: 1rem; -} - -div.accordion[data-theme="trakteer"] - > div.accordion_item - > div.accordion_header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem; - border-bottom: 1px solid var(--trakteer-dark); - font-size: 18px; - font-weight: 600; -} - -div.accordion[data-theme="trakteer"] > div.accordion_item_active { - border-radius: 10px; - border: 1px solid var(--trakteer-dark); -} - -div.accordion[data-theme="trakteer"] - > div.accordion_item_active - > div.accordion_header { - border-bottom: none; - padding-bottom: 0; -} - -div.accordion[data-theme="trakteer"] - > div.accordion_item - div.accordion_content { - padding: 0 1rem; -} diff --git a/ui/accordion/index.tsx b/ui/accordion/index.tsx deleted file mode 100644 index b5db3e0..0000000 --- a/ui/accordion/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -"use client"; - -import "../index.css"; -import "./index.css"; - -import { useState } from "react"; -import { Plus, X } from "lucide-react"; - -interface AccordionProps { - children: React.ReactNode; -} - -interface AccordionItemProps { - header: React.ReactNode; - children: React.ReactNode; - open?: boolean; - onOpenChange?: () => void; -} - -const Accordion = ({ children }: AccordionProps) => { - return ( -
- {children} -
- ); -}; - -const AccordionItem = ({ - header, - children, - open, - onOpenChange, -}: AccordionItemProps) => { - const [internalOpen, setInternalOpen] = useState(false); - - const isControlled = open !== undefined && onOpenChange !== undefined; - - const isOpen = isControlled ? open : internalOpen; - const handleToggle = isControlled - ? onOpenChange - : () => setInternalOpen(!internalOpen); - - return ( -
-
- {header} - {isOpen ? : } -
- {isOpen &&
{children}
} -
- ); -}; - -export { Accordion, AccordionItem }; diff --git a/ui/button/index.css b/ui/button/index.css deleted file mode 100644 index 1b2097c..0000000 --- a/ui/button/index.css +++ /dev/null @@ -1,110 +0,0 @@ -button[data-theme="trakteer"] { - font-family: "Fredoka", sans-serif; - padding: 8px 16px !important; - height: 42px; - display: flex; - align-items: center; - border-radius: 12px; -} - -button[data-theme="trakteer"] > :not(svg) { - display: flex; - align-items: center; - gap: 4px; -} - -button[data-theme="trakteer"] svg { - width: 16px; - height: 16px; -} - -button[data-theme="trakteer"][data-variant="default"] { - color: var(--trakteer-default-color); - background: var(--trakteer-default); - border: 1px solid var(--trakteer-default-border); - border-bottom: 4px solid var(--trakteer-default-border); -} - -button[data-theme="trakteer"][data-style="shadow"]:hover { - border-bottom: 1px solid var(--trakteer-default-border); - filter: brightness(1.05); - cursor: pointer; -} - -button[data-theme="trakteer"]:not([data-style="shadow"]):hover { - filter: brightness(1.05); - cursor: pointer; -} - -button[data-theme="trakteer"][data-variant="default"][data-style="default"] { - border: none; -} - -button[data-theme="trakteer"][data-variant="default"][data-style="icon"] { - border: none; - border-radius: 100%; - width: 42px; - padding: 0 !important; - display: flex; - align-items: center; - justify-content: center; -} - -button[data-theme="trakteer"][data-variant="outline"] { - color: var(--trakteer-outline-color); - background: var(--trakteer-outline); - border: 1px solid var(--trakteer-outline-border); - border-bottom: 4px solid var(--trakteer-outline-border); -} - -button[data-variant="outline"][data-style="default"] { - border: none; -} - -button[data-variant="outline"][data-style="icon"] { - border: none; - border-radius: 100%; - width: 42px; - padding: 0 !important; - display: flex; - align-items: center; - justify-content: center; -} - -button[data-variant="destructive"] { - color: var(--trakteer-destructive-color); - background: var(--trakteer-destructive); - border: 1px solid var(--trakteer-destructive-border); - border-bottom: 4px solid var(--trakteer-destructive-border); -} - -button[data-variant="destructive"][data-style="default"] { - border: none; -} - -button[data-variant="destructive"][data-style="icon"] { - border: none; - border-radius: 100%; - width: 42px; - padding: 0 !important; - display: flex; - align-items: center; - justify-content: center; -} - -button[data-variant="dark"] { - color: var(--trakteer-dark-color); - background: var(--trakteer-dark); - border: 1px solid var(--trakteer-dark-border); - border-bottom: 4px solid var(--trakteer-dark-border); -} - -button[data-variant="dark"][data-style="icon"] { - border: none; - border-radius: 100%; - width: 42px; - padding: 0 !important; - display: flex; - align-items: center; - justify-content: center; -} diff --git a/ui/button/index.tsx b/ui/button/index.tsx deleted file mode 100644 index 9460a2a..0000000 --- a/ui/button/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import "../index.css"; -import "./index.css"; - -type ButtonProps = { - children: React.ReactNode; - style?: "shadow" | "default" | "icon"; - variant?: "default" | "outline" | "destructive" | "dark"; -}; - -const Button = ({ - children, - style = "shadow", - variant = "default", -}: ButtonProps) => { - return ( - - ); -}; - -export { Button }; diff --git a/ui/content/docs/components/accordion.mdx b/ui/content/docs/components/trakteer/accordion.mdx similarity index 100% rename from ui/content/docs/components/accordion.mdx rename to ui/content/docs/components/trakteer/accordion.mdx diff --git a/ui/content/docs/components/button.mdx b/ui/content/docs/components/trakteer/button.mdx similarity index 95% rename from ui/content/docs/components/button.mdx rename to ui/content/docs/components/trakteer/button.mdx index fb63afa..acc20bf 100644 --- a/ui/content/docs/components/button.mdx +++ b/ui/content/docs/components/trakteer/button.mdx @@ -86,7 +86,7 @@ Control the variant either `default`, `outline`, `destructive`, `dark`. `default Control the style either `default`, `icon`, `shadow`. `shadow` is the default value. -
+